HTML <button> Tag

What You’ll Learn

By the end of this tutorial, you’ll create accessible, styled buttons for actions and forms.

What Is the <button> Tag?

The button element (<button>) is an interactive control that users can click, tap, or activate with the keyboard. It can contain text, images, or other HTML inside it—unlike <input type="button">.

Inside a <form>, a button without an explicit type defaults to submit. Always set type="button" for generic click handlers outside form submission.

📝 Syntax

Wrap button label text between opening and closing <button> tags. Always specify type:

<!-- Basic button syntax -->
<button type="button">Click Me</button>

Syntax Rules

• Always set type explicitly—avoid accidental form submission.
• Put descriptive label text inside the button (or use aria-label for icon-only buttons).
• Buttons can contain rich HTML: icons, spans, and multiple lines of text.
• Use disabled to prevent interaction when an action is unavailable.

<button
  type="button"
  class="btn-primary"
  id="save-btn"
>
  Save Changes
</button>

Examples Gallery

Real-world button patterns with copy-ready code, live previews, and hands-on practice.

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

<button type="button" id="greet-btn">Say Hello</button>
<p id="message"></p>

<script>
  document.getElementById("greet-btn")
    .addEventListener("click", function () {
      document.getElementById("message").textContent = "Hello!";
    });
</script>

<form action="/submit" method="post">
  <input type="text" name="username" placeholder="Username">
  <button type="submit">Submit</button>
</form>

<button type="button" disabled>Not Available</button>
<button type="button">Continue</button>

<style>
  .btn-primary {
    background: #16a34a;
    color: #fff;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
  }
</style>
<button type="button" class="btn-primary">Get Started</button>

♿ Accessibility

Make buttons usable for everyone:

• Clear labels — use descriptive text like “Save changes”, not just “Click here”.
• Keyboard support — buttons are focusable and activatable with Enter/Space by default.
• Don’t use div for buttons — use button for proper semantics and keyboard behavior.
• Disabled state — use disabled attribute, not just gray CSS styling.
• Icon-only buttons — add aria-label when there is no visible text.

💡 Best Practices