<button>

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

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

</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.

Rendered HTML Preview

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.