The Button Cheat Sheet

1. 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! ❤️

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

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

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

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

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

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

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

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

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

* Disclaimer: There might be edge cases in which a button element might not work for the custom control you’re building. In that case use a div, but make sure that your custom button is at least as accessible as a native button. If you’ve built a such a button, please get in touch, I’d love to see why and how.
** Neither fish nor fowl in Viennese-German

built with eleventy and ❤️ in Vienna by @mmatuzo

All examples have been copied from real websites, they're not made up by me.