<button> - The Button Element

The `<button>` Element

Form Control HTML 4.0

The button element creates clickable buttons for user interaction. Unlike <input type="button">, it can contain HTML content like images and text formatting.

Quick Example

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

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

<button type="button">
<strong>Bold</strong> Button
</button>

Result

Interactive code playground requires JavaScript. Here's the code:

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

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

<button type="button">
<strong>Bold</strong> Button
</button>

Syntax

<button type="button">Button Text</button>

The button requires an opening and closing tag. Content between the tags becomes the button label.

Attributes

Core Attributes

Attribute	Description	Values
`type`	Button behavior	`button`, `submit`, `reset`
`name`	Name for form data	String
`value`	Value sent with form data	String
`disabled`	Disables the button	Boolean
`form`	Associates with a form by ID	Form element ID
`autofocus`	Auto-focus on page load	Boolean

Form Submission Attributes

These override form attributes when the button submits:

Attribute	Description	Values
`formaction`	Override form action URL	URL
`formmethod`	Override form method	`get`, `post`
`formenctype`	Override form encoding	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`
`formnovalidate`	Bypass form validation	Boolean
`formtarget`	Override form target	`_self`, `_blank`, `_parent`, `_top`

Button Types

type=“button”

Generic button with no default behavior (requires JavaScript):

<button type="button" onclick="alert('Hello!')">
Click for Alert
</button>

<button type="button" id="counter-btn">
Clicks: <span id="count">0</span>
</button>

<script>
let count = 0;
document.getElementById('counter-btn').addEventListener('click', () => {
  count++;
  document.getElementById('count').textContent = count;
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<button type="button" onclick="alert('Hello!')">
Click for Alert
</button>

<button type="button" id="counter-btn">
Clicks: <span id="count">0</span>
</button>

<script>
let count = 0;
document.getElementById('counter-btn').addEventListener('click', () => {
  count++;
  document.getElementById('count').textContent = count;
});
</script>

type=“submit”

Submits the parent form (default type):

<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<button type="submit">Submit</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<button type="submit">Submit</button>
</form>

type=“reset”

Resets all form fields to their initial values:

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe">

<label for="email">Email:</label>
<input type="email" id="email" name="email" value="john@example.com">

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

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe">

<label for="email">Email:</label>
<input type="email" id="email" name="email" value="john@example.com">

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

Common Use Cases

Button with Icon

<style>
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
}
</style>

<button type="button" class="btn-icon">
<svg width="16" height="16" fill="currentColor">
  <path d="M8 0l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z"/>
</svg>
Favorite
</button>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
}
</style>

<button type="button" class="btn-icon">
<svg width="16" height="16" fill="currentColor">
  <path d="M8 0l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z"/>
</svg>
Favorite
</button>

Loading State Button

<button type="button" id="load-btn">Load Data</button>

<script>
const btn = document.getElementById('load-btn');
btn.addEventListener('click', async () => {
  btn.disabled = true;
  btn.textContent = 'Loading...';

  await new Promise(resolve => setTimeout(resolve, 2000));

  btn.disabled = false;
  btn.textContent = 'Load Data';
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<button type="button" id="load-btn">Load Data</button>

<script>
const btn = document.getElementById('load-btn');
btn.addEventListener('click', async () => {
  btn.disabled = true;
  btn.textContent = 'Loading...';

  await new Promise(resolve => setTimeout(resolve, 2000));

  btn.disabled = false;
  btn.textContent = 'Load Data';
});
</script>

Button Outside Form

Use the form attribute to associate with a form elsewhere:

<form id="myForm" action="/submit" method="post">
<label for="message">Message:</label>
<input type="text" id="message" name="message" required>
</form>

<!-- Button outside the form -->
<button type="submit" form="myForm">Submit Form</button>

Result

Interactive code playground requires JavaScript. Here's the code:

<form id="myForm" action="/submit" method="post">
<label for="message">Message:</label>
<input type="text" id="message" name="message" required>
</form>

<!-- Button outside the form -->
<button type="submit" form="myForm">Submit Form</button>

Multiple Submit Buttons

Different buttons can submit to different actions:

<form action="/save" method="post">
<label for="post">Post Content:</label>
<textarea id="post" name="content" rows="3"></textarea>

<button type="submit">Save Draft</button>
<button type="submit" formaction="/publish">Publish</button>
<button type="submit" formaction="/preview" formtarget="_blank">
  Preview
</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/save" method="post">
<label for="post">Post Content:</label>
<textarea id="post" name="content" rows="3"></textarea>

<button type="submit">Save Draft</button>
<button type="submit" formaction="/publish">Publish</button>
<button type="submit" formaction="/preview" formtarget="_blank">
  Preview
</button>
</form>

Submit Without Validation

<form action="/submit" method="post">
<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required>

<button type="submit">Submit (Validates)</button>
<button type="submit" formnovalidate>
  Save Draft (No Validation)
</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/submit" method="post">
<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required>

<button type="submit">Submit (Validates)</button>
<button type="submit" formnovalidate>
  Save Draft (No Validation)
</button>
</form>

Disabled Button

<style>
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

<button type="button" disabled>Unavailable Action</button>

<form>
<label>
  <input type="checkbox" id="agree">
  I agree to terms
</label>

<button type="submit" id="submit-btn" disabled>Submit</button>
</form>

<script>
document.getElementById('agree').addEventListener('change', (e) => {
  document.getElementById('submit-btn').disabled = !e.target.checked;
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

<button type="button" disabled>Unavailable Action</button>

<form>
<label>
  <input type="checkbox" id="agree">
  I agree to terms
</label>

<button type="submit" id="submit-btn" disabled>Submit</button>
</form>

<script>
document.getElementById('agree').addEventListener('change', (e) => {
  document.getElementById('submit-btn').disabled = !e.target.checked;
});
</script>

Styling Buttons

Basic Button Styles

<style>
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-secondary {
  background: #e5e7eb;
  color: #1f2937;
}

.btn-secondary:hover {
  background: #d1d5db;
}

.btn-danger {
  background: #ef4444;
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
}
</style>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-danger">Danger</button>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-secondary {
  background: #e5e7eb;
  color: #1f2937;
}

.btn-secondary:hover {
  background: #d1d5db;
}

.btn-danger {
  background: #ef4444;
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
}
</style>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-danger">Danger</button>

Button Sizes

<style>
.btn-sm {
  padding: 6px 12px;
  font-size: 14px;
}

.btn-md {
  padding: 10px 20px;
  font-size: 16px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 18px;
}

.btn-base {
  border: none;
  border-radius: 6px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
}
</style>

<button type="button" class="btn-base btn-sm">Small</button>
<button type="button" class="btn-base btn-md">Medium</button>
<button type="button" class="btn-base btn-lg">Large</button>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.btn-sm {
  padding: 6px 12px;
  font-size: 14px;
}

.btn-md {
  padding: 10px 20px;
  font-size: 16px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 18px;
}

.btn-base {
  border: none;
  border-radius: 6px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
}
</style>

<button type="button" class="btn-base btn-sm">Small</button>
<button type="button" class="btn-base btn-md">Medium</button>
<button type="button" class="btn-base btn-lg">Large</button>

Outline Buttons

<style>
.btn-outline {
  padding: 10px 20px;
  border: 2px solid #3b82f6;
  border-radius: 6px;
  background: transparent;
  color: #3b82f6;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-outline:hover {
  background: #3b82f6;
  color: white;
}
</style>

<button type="button" class="btn-outline">Outline Button</button>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.btn-outline {
  padding: 10px 20px;
  border: 2px solid #3b82f6;
  border-radius: 6px;
  background: transparent;
  color: #3b82f6;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-outline:hover {
  background: #3b82f6;
  color: white;
}
</style>

<button type="button" class="btn-outline">Outline Button</button>

Accessibility

<!-- Visible text -->
<button type="button">Delete</button>

<!-- Icon with accessible label -->
<button type="button" aria-label="Delete item">
  <svg>...</svg>
</button>

<!-- Icon only, no label -->
<button type="button">
  <svg>...</svg>
</button>

Descriptive Button Text

Good
Avoid

<button type="button">Delete Comment</button>
<button type="button">Save Changes</button>
<button type="submit">Submit Application</button>

<button type="button">Click Here</button>
<button type="button">OK</button>
<button type="submit">Submit</button>

Focus Indicators

Never remove focus outlines without providing an alternative:

<style>
.accessible-btn {
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
}

.accessible-btn:focus {
  outline: none;
  border-color: #1e40af;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
</style>

<button type="button" class="accessible-btn">
Tab to Focus Me
</button>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.accessible-btn {
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
}

.accessible-btn:focus {
  outline: none;
  border-color: #1e40af;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
</style>

<button type="button" class="accessible-btn">
Tab to Focus Me
</button>

Disabled State Communication

<button type="submit" disabled aria-disabled="true">
Submit Form
</button>

<p aria-live="polite" id="status">
Please fill out all required fields to enable submission.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<button type="submit" disabled aria-disabled="true">
Submit Form
</button>

<p aria-live="polite" id="status">
Please fill out all required fields to enable submission.
</p>

Loading State Accessibility

<button type="button" id="load-btn2" aria-live="polite">
Load Data
</button>

<script>
const btn = document.getElementById('load-btn2');
btn.addEventListener('click', async () => {
  btn.disabled = true;
  btn.setAttribute('aria-busy', 'true');
  btn.textContent = 'Loading...';

  await new Promise(resolve => setTimeout(resolve, 2000));

  btn.disabled = false;
  btn.setAttribute('aria-busy', 'false');
  btn.textContent = 'Load Data';
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<button type="button" id="load-btn2" aria-live="polite">
Load Data
</button>

<script>
const btn = document.getElementById('load-btn2');
btn.addEventListener('click', async () => {
  btn.disabled = true;
  btn.setAttribute('aria-busy', 'true');
  btn.textContent = 'Loading...';

  await new Promise(resolve => setTimeout(resolve, 2000));

  btn.disabled = false;
  btn.setAttribute('aria-busy', 'false');
  btn.textContent = 'Load Data';
});
</script>

Button vs Input

<button>
<input>

<button type="submit">
  <strong>Submit</strong> Form
</button>

Advantages: Can contain HTML (images, icons, formatting), more flexible for styling, better semantics, and easier to work with.

<input type="submit" value="Submit Form">

Disadvantages: Only plain text, limited styling options, self-closing tag.

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	4+	Full support (some CSS limitations in IE6-8)

The <button> element has been supported since HTML 4.0 and works in all modern browsers.

Alternative button input types (less flexible). Learn more →

For navigation (not actions). Use <a> for links, <button> for actions. Learn more →

<button> - The Button Element

The <button> Element

Quick Example

Syntax

Attributes

Core Attributes

Form Submission Attributes

Button Types

type=“button”

type=“submit”

type=“reset”

Common Use Cases

Button with Icon

Loading State Button

Button Outside Form

Multiple Submit Buttons

Submit Without Validation

Disabled Button

Styling Buttons

Basic Button Styles

Button Sizes

Outline Buttons

Accessibility

Always Provide Text Content

Descriptive Button Text

Focus Indicators

Disabled State Communication

Loading State Accessibility

Button vs Input

Browser Support

Related Elements

Specifications

The `<button>` Element