Can a <button> in HTML do something without javascript?

button, html

Solution

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).

Problem

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> ```

Original source