https://www.buttoncheatsheet.com/

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(tm)[?] 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.

 1. The HTML5 <button>

    Rating: Good, use it! 

    <button>Yea or nay?</button>

    Yea or nay?

    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?">

    [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. 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
 4. 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
 5. 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
 6. An image

    Rating: Hell no, don't use it!

    <img src="button.png">

    An image that looks like a button

    Details

      + That's an image, not a button
      + Not keyboard focusable
      + No key events by default
      + image instead of button role
      + No accessible name
 7. 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
 8. 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
 9. The worst of two worlds

    Rating: Please, just don't do that!

    <button>
      <a href="https://www.htmhell.dev">
        Yea or Nay?
      </a>
    </button>

    Yea or nay?

    Details

      + Don't nest interactive elements
      + If you need a link that looks like a button, style the link
        accordingly

Further reading

  * Enough with the role-play--let's get back to the basics
  * Just use button -- A11ycasts #05
  * ButtonBuddy

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