<button>

Since:		HTML 4（1997）

The button element creates a clickable button. Unlike the button-type variants of input, it can contain HTML inside the element, allowing you to create flexible buttons that include icons and decorative content.

Syntax

<!-- Form submit button -->
<button type="submit">Submit</button>

<!-- General-purpose button (handled by JavaScript) -->
<button type="button">Click</button>

<!-- Disabled button -->
<button type="button" disabled>Unavailable</button>

<!-- Button containing HTML -->
<button type="button">
  <img src="icon.png" alt=""> Search
</button>

Attribute List

Attribute	Description
type	Specifies the button's behavior. There are three options: `submit` (submits the form), `button` (general-purpose), and `reset` (resets the form).
name	Specifies the button's name. Used to identify which button was pressed when a form has multiple submit buttons.
value	Specifies the value sent to the server when the form is submitted.
disabled	Grays out the button and prevents it from being clicked. This is a boolean attribute that requires no value.
form	Specifies the `id` of the form to associate the button with. Use this when placing a button outside its form element.

Sample Code

sample_button.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Button Element</title>
  <style>
    button {
      padding: 8px 16px;
      margin: 4px;
      border-radius: 4px;
      cursor: pointer;
    }
    .btn-primary { background: #3498db; color: #fff; border: none; }
    .btn-danger  { background: #e74c3c; color: #fff; border: none; }
  </style>
</head>
<body>

  <form id="myForm" action="/send" method="post">
    <p>
      <label for="name">Name: <input type="text" id="name" name="name"></label>
    </p>
  </form>

  <!-- Works as a submit button for the form outside it via the form attribute -->
  <button type="submit" form="myForm" class="btn-primary">Submit</button>

  <!-- General-purpose button (handled by JavaScript) -->
  <button type="button" onclick="alert('Hello!')">Greet</button>

  <!-- Disabled button -->
  <button type="button" class="btn-danger" disabled>Delete (Disabled)</button>

  <!-- Use name/value to identify which of multiple submit buttons was clicked -->
  <form action="/article" method="post">
    <input type="hidden" name="id" value="42">
    <!-- The server checks $_POST['action'] (or req.body.action) to tell them apart -->
    <button type="submit" name="action" value="save">Save Draft</button>
    <button type="submit" name="action" value="publish">Publish</button>
  </form>

</body>
</html>

Result

A blue "Submit" button, a "Greet" button, and a grayed-out "Delete (Disabled)" button are displayed. Clicking "Greet" shows an alert, and "Delete (Disabled)" cannot be clicked. Clicking either "Save Draft" or "Publish" sends a different action value to the server, allowing you to distinguish which button was pressed.

View sample page

Notes

The key advantage of the button element is that its content can include HTML. You can place not just text but also icon images, SVGs, and more inside it, giving you great design flexibility. CSS styles can also be applied freely.

If you omit the type attribute, the button defaults to submit behavior inside a form. Always specify type="button" explicitly for buttons intended only for JavaScript event handling. Omitting it can cause unintentional form submissions.

The combination of name and value is useful when placing multiple submit buttons in a single form — it lets the server determine which button was clicked. For other input controls related to buttons, see the input (buttons & misc) page.

Customizing Buttons with CSS

How to reset the browser's default button styles and build a fully custom design from scratch.

<style>
  /* Reset defaults and build from scratch */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    text-decoration: none;  /* for <a> styled as a button */
  }
  .btn:hover { filter: brightness(1.1); }
  .btn:active { transform: scale(0.97); }
  .btn:disabled, .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* Variants */
  .btn-primary   { background: #3498db; color: #fff; }
  .btn-success   { background: #2ecc71; color: #fff; }
  .btn-danger    { background: #e74c3c; color: #fff; }
  .btn-outline   { background: transparent; color: #3498db;
                   border: 2px solid #3498db; }
  .btn-ghost     { background: transparent; color: #333; }
  /* Sizes */
  .btn-sm { padding: 6px 12px; font-size: 0.85rem; }
  .btn-lg { padding: 14px 28px; font-size: 1.15rem; }
</style>

<button type="button" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-outline">Cancel</button>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
<button type="button" class="btn btn-primary" disabled>Processing...</button>

JavaScript Integration Patterns

// Click event (recommended: addEventListener)
var btn = document.getElementById("my-btn");
btn.addEventListener("click", function() {
  console.log("Clicked!");
});

// Enable/disable a button
function setLoading(btn, isLoading) {
  btn.disabled = isLoading;
  btn.textContent = isLoading ? "Submitting..." : "Submit";
}

// Disable button on form submit to prevent double submission
var form = document.getElementById("my-form");
var submitBtn = document.getElementById("submit-btn");
form.addEventListener("submit", function() {
  setLoading(submitBtn, true);
});

// Use data-* attributes to identify which button was clicked
document.querySelectorAll("[data-action]").forEach(function(btn) {
  btn.addEventListener("click", function() {
    console.log("action:", this.dataset.action);
  });
});