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

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

To answer the question asked in the heading, yes, the button element can “do things” without JavaScript. With type=submit, it submits a form, as in the example at the end of the question. With type=reset, it wipes out all user input from the form. It’s just type=button (the default when the element is outside any form) that is JavaScript-dependent and does not do anything without scripting.

To answer the question you should have asked: Use links, Luke. You can style a link look pretty much like a button if you want (might make sense in an application-like context), even using just CSS 2.1 plus optional CSS3 enhancements like rounded corners.


You can simply add implementation of button click (if that references any webpage) by adding an <a> tag before it. For example:

<a href="https://www.youtube.com/">
    <button>Youtube</button>
</a>

This doesn't need any JavaScript as far as I know.

Tags:

Html

Button