<button>

Definition and Usage

The <button> element establishes a clickable button. Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). This is not possible with a button created with the <input> element.

Always specify the type attribute for a <button> element to tell browsers what type of button it is.

Attributes

Global Attributes

The <button> tag also supports all HTML global attributes such as class, id, style, etc.

Examples

Basic Button

A simple clickable button:

<button>Click Me!</button>

Button with Type Attribute

Different button types:

<button type="button">Click Me</button>
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>

Disabled Button

A button that cannot be clicked:

<button disabled>Disabled Button</button>

Button with Icons

Buttons can contain HTML content:

<button
  >
  <img
    src="icon.png"
    alt="Icon"
    style="width:16px; height:16px;"
  />
  Save
</button
>

<button
  >
  <i class="fas fa-download"></i> Download
</button
>

Form Submit Button

Using button to submit a form:

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

Button with JavaScript

Triggering JavaScript on click:

<button onclick="alert('Hello World!')">Click Me</button>

<script>
  function myFunction() {
    alert('Button was clicked!');
  }
</script>

<button onclick="myFunction()">Click for Alert</button>

Styled Buttons

Custom button styling with CSS:

<style>
  .btn-primary {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }

  .btn-primary:hover {
    background-color: #45a049;
  }

  .btn-danger {
    background-color: #f44336;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

<button class="btn-primary">Primary Button</button>
<button class="btn-danger">Danger Button</button>

Button with Loading State

Showing loading state:

<button id="loadBtn">Load Data</button>

<script>
  document.getElementById('loadBtn').addEventListener('click', function() {
    this.disabled = true;
    this.innerHTML = 'Loading...';

    // Simulate loading
    setTimeout(() => {
      this.disabled = false;
      this.innerHTML = 'Load Data';
    }, 2000);
  });
</script>

Button with Form Attributes

Using formaction and formmethod:

<form action="/default" method="get">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <button type="submit">Submit (GET to /default)</button>
  <button type="submit" formaction="/special" formmethod="post">
    Submit (POST to /special)
  </button>
</form>

Try it Yourself

Button Types Comparison

Understanding the different button types:

Accessibility

• Always use descriptive text: Button text should clearly indicate what will happen when clicked
• ARIA labels: Use aria-label for icon-only buttons to provide context for screen readers
• Keyboard navigation: Buttons are natively keyboard accessible (Space or Enter to activate)
• Focus indicators: Ensure buttons have visible focus states for keyboard users
• Disabled state: Use disabled attribute, not CSS, to properly disable buttons
• ARIA attributes: Use aria-pressed for toggle buttons, aria-expanded for dropdown buttons
• Loading states: Use aria-busy="true" when button triggers async operations

<!-- Icon button with ARIA label -->
<button
  aria-label="Close dialog"
  >
  <span aria-hidden="true">×</span
  >
</button
>

<!-- Toggle button -->
<button
  aria-pressed="false"
  onclick="this.setAttribute('aria-pressed', 'true')"
  >
  Mute
</button
>

<!-- Button with loading state -->
<button
  aria-busy="false"
  id="submitBtn"
  >
  Submit
</button
>

Best Practices

• Always specify type: Always set the type attribute to avoid unexpected form submission
• Use semantic HTML: Use <button> for actions, <a> for navigation
• Descriptive text: Use clear, action-oriented text (e.g., "Save Changes" instead of "OK")
• Visual feedback: Provide hover and active states using CSS
• Disable during processing: Disable submit buttons during form processing to prevent double-submission
• Consistent styling: Maintain consistent button styles across your application
• Size and touch targets: Ensure buttons are large enough for touch interaction (minimum 44x44px)
• Loading indicators: Show loading state for async operations

<button> vs <input type="button">

Comparing <button> with <input type="button">:

CSS Styling

Common button styling patterns:

<style>
  /* Base button styles */
  button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  /* Primary button */
  .btn-primary {
    background-color: #007bff;
    color: white;
  }

  .btn-primary:hover {
    background-color: #0056b3;
  }

  .btn-primary:active {
    transform: scale(0.98);
  }

  /* Disabled state */
  button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Focus state for accessibility */
  button:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }
</style>

Related Tags

• <input>

  Defines an input control

• <form>

  Defines an HTML form

• <label>

  Defines a label for an input

• <a>

  Defines a hyperlink

• <select>

  Defines a dropdown list

• <textarea>

  Defines a multi-line input