<button> vs. <input type=“button” />.

Question

When looking at most sites (including SO), most of them use:

<input type="button" />

instead of:

<button></button>

• What are the main differences between the two, if any?
• Are there valid reasons to use one instead of the other?
• Are there valid reasons to use combine them?
• Does using <button> come with compatibility issues, seeing it is not very widely used?

Answer 1

<button>

• by default behaves like if it had a "type="submit" attribute
• can be used without a form as well as in forms.
• text or html content allowed
• css pseudo elements allowed (like :before)
• tag name is usually unique to a single form

vs.

<input type='button'>

• type should be set to 'submit' to behave as a submitting element
• can only be used in forms.
• only text content allowed
• no css pseudo elements
• same tag name as most of the forms elements (inputs)

--
in modern browsers, both elements are easily styleable with css but in most cases, button element is preferred as you can style more with inner html and pseudo elements

Answer 2

Use button from input element if you want to create button in a form. And use button tag if you want to create button for an action.