The Button Cheat Sheet

Do you need a button for your next project but you’re not sure about the right markup?
Don’t worry, The Button Cheat Sheet™️ has got you covered.

If you’re not sure whether you should use a button or a link, watch The Links vs. Buttons Showdown by Marcy Sutton.

The HTML5 <button>

Rating: Good, use it! 🥳
```
<button>Yea or nay?</button>
```
Details
- That’s a proper button!
- It’s focusable
- It has correct key events by default
- Correct button role
- Supports HTML content
- All in all beautiful! ❤️
The <input> button

Rating: Okay, but <button> offers more flexibility! 🙂
```
<input type="button" value="Yea or nay?">
```
Details
- That’s a proper button!
- It’s focusable
- It has correct key events by default
- Correct button role
- Supports only text content
The image button

Rating: Okay, but not recommended. <button> offers more flexibility! 😕
```
<input type="image" alt="Yea or nay?" src="button.png">
```
Details
- That’s a proper button!
- It’s focusable
- It has correct key events by default
- Correct button role
- Supports only text content
- Styling limited
A div *

Rating: The worst, don’t use it! 🤮
```
<div>Yea or nay?</div>
```
Yea or nay?

Details
- That’s not a button!
- Not keyboard focusable
- No key events by default
- No semantic button role
- Shows wrong cursor on hover
A focusable div

Rating: Really bad, don’t use it!
```
<div tabindex="0">Yea or nay?</div>
```
Yea or nay?

Details
- That’s not a button
- No key events by default
- No semantic button role
- Shows wrong cursor on hover
A focusable div with a button role

Rating: Bad, don’t use it!
```
<div tabindex="0" role="button">Yea or nay?</div>
```
Yea or nay?

Details
- It feels like a button, but it’s still not a proper button
- No key events by default
- Shows wrong cursor on hover
An image

Rating: Hell no, don’t use it!
```
<img src="button.png">
```
Details
- That’s an image, not a button
- Not keyboard focusable
- No key events by default
- image instead of button role
- No accessible name
A placeholder link

Rating: Hmm...no, don’t use it!
```
<a>Yea or nay?</a>
```
Yea or nay?
Details
- That’s a placeholder link, not a button
- Not keyboard focusable
- No key events by default
- link instead of button role
- Shows wrong cursor on hover
Ned Fisch, ned Fleisch**

Rating: Nope, don’t use it!
```
<a role="button" tabindex="0">Yea or nay?</a>
```
Yea or nay?
Details
- That’s a placeholder link, not a button
- No key events by default
- Shows wrong cursor on hover
The worst of two worlds

Rating: Please, just don’t do that!
```
<button>
  <a href="https://www.htmhell.dev">
    Yea or Nay?
  </a>
</button>
```
Details
- Don’t nest interactive elements
- If you need a link that looks like a button, style the link accordingly

Further reading