1. Web Design
  2. HTML

HTML Element: button

Scroll to top
Read Time: 2 min

The <button> element gives us an interactive button labeled by its contents. You might use an HTML button to submit a form, or to do something else triggered by JavaScript. The type attribute controls the behavior of the button when it is activated.


There are three types of type for a button element, thought they’re all displayed in exactly the same way by the browser:

  1. type=submit: Used to submit a form.
  2. type=reset: Used to reset a form.
  3. type=button: Used as a general button control (does nothing by default).



<button>Click me</button>
<button type="reset">Reset form</button>
<button type="submit">Submit</button>


Browser Support

The <button> tag is supported in all modern browsers. Read more on caniuse.com.


The <button> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them). 

The <button> element also supports the following attributes:

  • type: Type of button - submit, reset, button
  • value: Value to be used for form submission
  • disabled: Whether the form control is disabled
  • form: Associates the element with a form element
  • formaction: URL to use for form submission
  • forenctype: Entry list encoding type to use for form submission
  • formmethod: Variant to use for form submission
  • formnovalidate: Bypass form control validation for form submission
  • formtarget: Navigable for form submission
  • name: Name of the element to use for form submission and in the form.elements API


A <button> supports phrasing content, but there must be no interactive content descendant and no descendant with the tabindex attribute specified.

<button> elements are more flexible for styling than <input> elements. Other HTML elements (like <span>, <div>, <img> etc.) can be contained within them. ::after and ::before pseudo-elements can be used on them via CSS too.

In the example below you can see <svg> elements nested directly within the <button> elements (svg icons from the BeBold Essentials UI Icon Pack, available on Envato Elements):


    Button label


Learn More

Did you know by using the form="" attribute on a <button> element you can identify and submit a form from outside the <form> element itself?
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.