HTML Button
The <button> element is one of the most fundamental interactive elements in HTML. It represents a clickable control that can trigger actions, submit forms, or reset form data.
Buttons are essential for user interaction. They should always have clear labels, proper styling, and accessible states including hover, focus, and active indicators.
The basic syntax of a button element is straightforward:
| 1 | <button type="button"> |
| 2 | Click Me |
| 3 | </button> |
Here is a complete example with styling:
1<button class="btn" id="saveBtn">2 Save Changes3</button>Interactive buttons with different styles:
Complete implementation with all interactive states:
| 1 | button { |
| 2 | background: #4F46E5; |
| 3 | color: white; |
| 4 | border: none; |
| 5 | padding: 10px 20px; |
| 6 | border-radius: 6px; |
| 7 | font-size: 14px; |
| 8 | cursor: pointer; |
| 9 | transition: all 0.2s ease; |
| 10 | } |
| 11 | |
| 12 | button:hover { |
| 13 | background: #4338CA; |
| 14 | transform: translateY(-1px); |
| 15 | } |
| 16 | |
| 17 | button:focus { |
| 18 | outline: 2px solid #4F46E5; |
| 19 | outline-offset: 2px; |
| 20 | } |
| 21 | |
| 22 | button:active { |
| 23 | background: #3730A3; |
| 24 | transform: translateY(0); |
| 25 | } |
info
The typeattribute defines the button's behavior:
| Type | Description | Default |
|---|---|---|
| submit | Submits the form data | Yes |
| reset | Resets all form fields to their initial values | — |
| button | Clickable button with no default behavior | — |
warning
✗ Incorrect
<div onclick="submitForm()">Submit</div>Using a div instead of a button breaks accessibility and keyboard navigation.
✓ Correct
<button type="button" onclick="submitForm()">Submit</button>Always use semantic button elements for interactive controls.
best practice
pro tip
| Browser | Support | Version |
|---|---|---|
| Chrome | ✓ | All |
| Firefox | ✓ | All |
| Safari | ✓ | All |
| Edge | ✓ | All |