docs.rodeo

MDN Web Docs mirror

The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

By default, HTML buttons are presented in a style resembling the platform the {{Glossary("user agent")}}  runs on, but you can change buttons’ appearance with CSS.

{{InteractiveExample("HTML Demo: &lt;button&gt;", "tabbed-shorter")}} 

<button class="favorite styled" type="button">Add to favorites</button>

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  background-color: tomato;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 0.2),
    rgb(0 0 0 / 0.2) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

.styled:hover {
  background-color: red;
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 0.6),
    inset 2px 2px 3px rgb(0 0 0 / 0.6);
}

Attributes

This element’s attributes include the global attributes.

Notes

A submit button with the attribute formaction set, but without an associated form does nothing. You have to set a form owner, either by wrapping it in a <form> or set the attribute form to the id of the form.

<button> elements are much easier to style than {{HTMLElement("input")}}  elements. You can add inner HTML content (think <i>, <br>, or even <img>), and use {{Cssxref("::after")}}  and {{Cssxref("::before")}}  pseudo-elements for complex rendering.

If your buttons are not for submitting form data to a server, be sure to set their type attribute to button. Otherwise, they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.

While <button type="button"> has no default behavior, event handlers can be scripted to trigger behaviors. An activated button can perform programmable actions using JavaScript, such as removing an item from a list.

By default, user agents style buttons as display: flow-root, which establishes a new block formatting context and centers the button’s children both horizontally and vertically as long as they do not overflow. If the button is defined as a flex or grid container, the children will behave as flex or grid items. A button set to display: inline will be styled as if the value were set to display: inline-block.

Accessibility

Icon buttons

Buttons that only display an icon do not have an {{glossary("accessible name")}} . Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate an accessibility tree. Assistive technology then uses the accessibility tree to navigate and manipulate page content.

To give an icon button an accessible name, put text in the <button> element that concisely describes the button’s functionality.

Examples

<button name="favorite">
  <svg fill="black" viewBox="0 0 42 42">
    <path
      d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,
      3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,
      2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>
  </svg>
  Add to favorites
</button>
Result

{{EmbedLiveSample('Icon buttons')}} 

If you want to visually hide the button’s text, an accessible way to do so is to use a combination of CSS properties to remove it visually from the screen, but keep it parsable by assistive technology.

However, it is worth noting that leaving the button text visible can help people who may not be familiar with the icon’s meaning or understand the button’s purpose. This is especially important for people who are not technologically sophisticated or who may have different cultural interpretations of the icon the button uses.

Size and Proximity

Size

Interactive elements such as buttons should have an area large enough to be easy to activate. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 CSS pixels is recommended.

Proximity

Large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. This spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content.

Spacing may be created using CSS properties such as {{cssxref("margin")}} .

ARIA state information

To describe the state of a button the correct ARIA attribute to use is aria-pressed and not aria-checked or aria-selected. To find out more read the information about the ARIA button role.

Button styles

It is best not to override the default focus ring for elements that have focus. If the button styles are overridden, it is important to ensure that the focus state has enough contrast so that people experiencing low vision conditions can perceive it and people with cognitive differences will understand it.

The {{cssxref(":focus-visible")}}  pseudo-class can be used to apply styles to an element that has {{cssxref(":focus")}}  only when the user agent’s heuristics determine that the focus should be highlighted, such as when a <button> receives keyboard focus. See :focus vs :focus-visible for more information.

Color contrast ratio is determined by comparing the luminosity of the button text and background color values to the background the button is placed on. To meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and {{cssxref("font-weight", "bold")}}  or larger, or 24px or larger.)

Clicking and focus

Whether clicking on a <button> or {{HTMLElement("input")}}  button types causes it to (by default) become focused varies by browser and OS. Most browsers do give focus to a button being clicked, but Safari does not, by design.

Examples

Creating a basic button

This example creates a clickable button. The type="button" attribute ensures the button has no default behavior. You can make this button interactive using JavaScript or attributes such as command and commandfor.

<button type="button" name="button">I'm a button</button>

{{ EmbedLiveSample('creating_a_basic_button', 200, 64) }} 

Using the request-close value for the command attribute

The dialog in this example has two radio buttons that control whether or not the dialog can be closed. Select Yes or No, and then click Request to Close to try to close the dialog. If Yes is selected, the dialog closes; if No is selected, the dialog stays open and shows a message instead.

<button type="button" commandfor="mydialog" command="show-modal">
  Open Dialog
</button>
<dialog id="mydialog">
  <div class="wrapper">
    <form>
      <fieldset>
        <legend>Allow this dialog to close when requested?</legend>
        <div>
          <input type="radio" id="no" name="close" value="no" checked />
          <label for="no">No</label>
        </div>
        <div>
          <input type="radio" id="yes" name="close" value="yes" />
          <label for="yes">Yes</label>
        </div>
      </fieldset>
    </form>
    <button commandfor="mydialog" command="request-close">
      Request to Close
    </button>
    <p class="warning" hidden>You must choose "Yes" to close this dialog.</p>
  </div>
</dialog>

.warning {
  color: tomato;
}

const dialog = document.querySelector("dialog");
const radio = document.querySelector("form").elements["close"];
const warning = document.querySelector(".warning");

dialog.addEventListener("cancel", (e) => {
  if (!e.cancelable) return;
  if (radio.value === "no") {
    warning.hidden = false;
    e.preventDefault();
  } else {
    warning.hidden = true;
  }
});

{{ EmbedLiveSample('using_the_request-close_value_for_the_command_attribute', 100, 200) }} 

The Open Dialog button opens the <dialog> element using command="show-modal".

The Request to Close button has command="request-close", which targets the <dialog> element using the commandfor="mydialog" attribute. When it’s clicked, it asks the <dialog> if it can be closed (unlike the command="close" attribute, which would close the <dialog> immediately). This checks if the <dialog> is cancelable using a cancel event.

When the event is cancelable, the value of the radio buttons is checked:

Technical summary

Content categories Flow content, phrasing content, Interactive content, listed, labelable, and submittable form-associated element, palpable content.
Permitted content Phrasing content but there must be no Interactive content. If the <button> is the first child of a customizable select element, then it may also contain zero or one `{{htmlelement("selectedcontent")}}`  element.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role button
Permitted ARIA roles checkbox, combobox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab
DOM interface `{{domxref("HTMLButtonElement")}}` 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

In this article

View on MDN