HTML and CSS tips #5 "How the button element can help you markup the hamburger button"

twitter logo github logo Updated on ・1 min read

When you have to markup the hamburger button you should use the button element with type="button". Also you should add text inside of the button element that screen readers could read and voice it.

Don't do it

<div class="hamburger">
  <div class="hamburger__text"></div>

<!-- or -->

<span class="hamburger">
  <span class="hamburger__text"></span>

You can use it instead

<button class="hamburger" type="button">
  <span class="hamburger__text">to open menu</span>

P.S: I share my experience with my Linkedin subscribers. Are you interested? Join to us! 👉 https://www.linkedin.com/in/melnik909/

twitter logo DISCUSS
Classic DEV Post from Aug 1 '19

Which dev.to loading GIF do you prefer?

I made some dev.to loading gifs

Stas Melnikov profile image
I create challenges that help to check CSS knowledge 👉 https://www.patreon.com/melnik909

dev.to now has dark theme. 🌝

Go to the "misc" section of your settings and select night theme

P.S. You can also change font to sans serif, which a lot of folks prefer. 💖

P.P.S. It's also the best place to talk code amongst thoughtful developers, and it's totally open source