← Back to All Tags

<button>

Creates interactive button elements

Standard HTML

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.

Tip: The <button> element is much easier to style than the <input> element. You can add inner HTML content (think <i>, <br>, or even <img>).
Important: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.

Browser Support

The <button> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
autofocus autofocus Specifies that a button should automatically get focus when the page loads
disabled disabled Specifies that a button should be disabled
form form_id Specifies which form the button belongs to
formaction URL Specifies where to send the form-data when a form is submitted (only for type="submit")
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Specifies how form-data should be encoded before sending it to a server (only for type="submit")
formmethod get
post		 Specifies how to send the form-data (only for type="submit")
formnovalidate formnovalidate Specifies that the form-data should not be validated on submission (only for type="submit")
formtarget _blank
_self
_parent
_top
framename		 Specifies where to display the response after submitting the form (only for type="submit")
name name Specifies a name for the button
type button
reset
submit		 Specifies the type of button
value text Specifies an initial value for the button

Global Attributes

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

Examples

Basic Button

A simple clickable button:

Example

<button>Click Me!</button>

Button with Type Attribute

Different button types:

Example

<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:

Example

<button disabled>Disabled Button</button>

Button with Icons

Buttons can contain HTML content:

Example

<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:

Example

<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:

Example

<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:

Example

<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:

Example

<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:

Example

<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

Interactive Example

Click the buttons to see them in action:

Button Types Comparison

Understanding the different button types:

Type Behavior Use Case
submit Submits the form data to the server Form submission buttons (default type if not specified)
reset Resets all form controls to their initial values Clear form button (rarely used in modern web design)
button Does nothing by default; used with JavaScript Custom functionality with JavaScript event handlers

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

Example - Accessible Buttons

<!-- 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">:

Feature <button> <input type="button">
Content Can contain HTML (images, icons, formatting) Plain text only (via value attribute)
Styling Easier to style with CSS More limited styling options
Default Type submit (if not specified) button (does nothing by default)
Flexibility More flexible and powerful Simpler, more limited
Use Case Preferred for modern web development Legacy forms, simple buttons
Recommendation: Use <button> for better flexibility and modern web development. It's easier to style and can contain rich content.

CSS Styling

Common button styling patterns:

Example

<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