In todays modern browsers, is there ever any advantage to using input[type="button"] over <button>?

Question

From all I know about <button>s vs. input[type="button"], I can't see any advantages that would compel me to use input[type="button"] - are there any?

Note that I don't care about < IE11.

Answer 1

This is a really good question because the answer is not what you might expect.

It turns out the most pertinent consideration is not the <input>/<button> element at all... but the type attribute.

Here's why:

The default behaviour of <button> is identical to <input type="submit" />

If you want to get a <button> to behave (as well as look) like <input type="button" />, you'll need to use...

<button type="button">

Answer 2

I'm not sure if there are any more technical reasons, but my preference has been for simpler HTML and CSS.

It is easier to write <button>Button</button> and style it with button {…} than it is for <input type="button" value="Button'> and input[type="button"] {…}. Not to mention your <input type="button"> possibly inheriting unfortunate input {…} styles, requiring more lines of CSS to undo the damage.

Both methods have been working for ages (IE6+?), though I believe some older browsers had <button> clicks submit forms by default unless told otherwise.