Question

I have a web page that has a button. Currently I am binding this button to a javascript handler that makes the page redirect to a given URL when it is clicked.

HTML:

<button class="click-me">Clike me to navigate</button>

JS:

$('.click-me').on('click', function() { window.location = '/myloc'; });

I am now trying to build a fallback (no-javascript) version of this page. I would like this button to do the same job but without using javascript. In other words, I am trying to make this button functional even if javascript of the browser is disabled.

I know this can be achieved by form (as shown below). But I am looking for any cleaner implementation.

<form name="hack" action="/myloc">
  <button type="submit" class="click-me">Click me to navigate</button>
</form>

Answer 1

Use an a element, that’s what they’re for:

<a class="click-me" href="/path/to/whatever/page">Click me to navigate</a>

And then simply style it as a button.

For example with the following CSS:

.clickMe {
    -moz-appearance: button;
    -ms-appearance: button;
    -o-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    text-decoration: none;
    color: #000;
    padding: 0.2em 0.4em;
}​

JS Fiddle demo.

(Obviously this assumes the use of a browser that supports the appearance (or vendor-prefixed versions) CSS property.)

References:

• appearance (albeit it’s the -moz- prefixed MDN documentation).
• appearance property, at the W3C.
• Unfortunately-dropped CSS3 features (at the W3C).