Path // www.yourhtmlsource.com → Reference → <button>

<button>

by Ross Shannon

The <button> element represents a clickable button that users can interact with. Unlike the <input type="submit"> element, the button element can contain rich content including text, images, and other HTML elements, making it more flexible for creating custom button designs. It can be used to submit forms, reset forms, or trigger JavaScript actions.

Clock This page was last updated on 2025-11-17


Syntax

<button type="submit">Click Me</button>

The element requires both opening and closing tags. The content between the tags becomes the button label and can include text, images, icons, or other inline elements.

Attributes

  • type - Specifies the button's behavior:
    • submit - Submits the form (default when inside a form)
    • reset - Resets all form controls to their initial values
    • button - No default behavior (use for JavaScript actions)
  • name - Name of the button for form submission
  • value - Value submitted with the form data
  • disabled - Disables the button (cannot be clicked)
  • autofocus - Automatically focuses the button when page loads
  • form - Associates button with a form by ID (for buttons outside the form)
  • formaction - Overrides the form's action URL (for submit buttons)
  • formmethod - Overrides the form's method (get/post)
  • formenctype - Overrides the form's enctype
  • formnovalidate - Disables form validation for this submission
  • formtarget - Overrides the form's target (_self, _blank, etc.)
  • aria-label - Accessible label for screen readers (when button content isn't descriptive)
  • aria-describedby - References element with additional description
  • aria-pressed - Indicates toggle button state ("true", "false", "mixed")
  • aria-expanded - Indicates if controlled element is expanded
  • aria-controls - References the element this button controls

Examples

Basic Form Submission

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit Form</button>
</form>

Button with Icon and Text

<button type="submit" class="btn-primary">
  <svg class="icon">...</svg>
  Save Changes
</button>

JavaScript Action Button

<button type="button" onclick="toggleMenu()"
        aria-expanded="false"
        aria-controls="main-menu">
  Toggle Menu
</button>

When to Use

Use the <button> element when:

  • Creating form submission buttons
  • Building reset buttons to clear form data
  • Triggering JavaScript actions (modal dialogs, toggles, etc.)
  • Need buttons with rich content (icons, images, styled text)
  • Creating accessible interactive controls

Accessibility and best practices:

  • Always specify type attribute explicitly (default is "submit" which may cause unexpected form submissions)
  • Use descriptive text content that explains the button's action
  • Add aria-label when button text alone isn't descriptive enough
  • For icon-only buttons, include aria-label or visually hidden text
  • Use aria-pressed for toggle buttons to indicate state
  • Use aria-expanded and aria-controls for buttons that show/hide content
  • Ensure sufficient color contrast for button text and background
  • Make buttons large enough for easy clicking (minimum 44x44 pixels)
  • Avoid using <div> or <span> as buttons - use proper <button> elements
  • Disabled buttons should use the disabled attribute, not just styling
  • <form> - Container for form controls
  • <input> - Alternative form controls including submit buttons
  • <label> - Labels for form controls
  • <fieldset> - Groups related form controls
  • <output> - Displays results of calculations

Comparison with input buttons:

<!-- Input button - text only -->
<input type="submit" value="Submit">

<!-- Button element - can contain HTML -->
<button type="submit"><strong>Submit</strong> Form</button>