loading...

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>
</div>

<!-- or -->

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

You can use it instead

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

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 Nov 14 '19

Share your CSS knowledge

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

Sore eyes?

dev.to now has dark mode.

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