Anders Tornblad

All about the code

Label archive for html5

A simple hamburger button

There are lots of tutorials, pens and fiddles out there describing how to create the perfect hamburger button, as well as a few bloggers telling us to stop using it. Me, I kind of like it, actually. It has become a household item – most people know what it is and what it should do. Also, it has been around for almost 40 years. Check out this history of widgets until 1990

A simple layout

I like trying to keep things as simple as possible, so instead of going all in with SVG, JavaScript, animations and complicated transitions, the HTML markup for my hamburger button is simple:

<button class="hamburger"> <hr> <hr> <hr> </button>

The CSS is almost as simple:

button.hamburger { display: flex; flex-direction: column; justify-content: space-around; align-items: stretch; width: 6vw; height: 6vw; box-sizing: border-box; padding: 1vw; border-raius: 0.8vw; background: #195024; cursor: pointer; } button.hamburger hr { display: block; border: 0; height: 0.5vw; background: white; }

Always some browser issue

This worked like a charm until I tested in Firefox. Even though the button element has justify-content: space-around, the hr elements get lumped together in the middle. Even IE got it right. But just for Firefox, I had to add this to my CSS:

button.hamburger hr + hr { margin-top: 0.5vw; }