It may sound tasty, but the hamburger button above doesn't contain anything worth eating. Instead, this three-line symbol holds menu options to help make website layouts cleaner and easier to navigate.
Now a familiar feature on websites worldwide, there's an ongoing debate about the benefits and potential drawback of this burger-like button.
In this guide, we'll dive into the details and put the burger button under the grill: What is a hamburger button, exactly? Why bother with this bun button style, and how do you make one in CSS? What options are out there to boost your burger-making mojo?
Hamburger Button History
The burger button got its start in 1981 when designer Norm Cox did some work for the Xerox personal workstation. He tried other iterations — including a downward-pointing arrow, asterisk, and plus symbol — but none offered the same ease-of-use as this simple hamburger helper.
Users quickly got the concept: Click on the button to get a drop-down menu of navigation or feature links. Beyond its initial run at Xerox, however, designers didn't really bother with the burger — until Twitter started using it in 2008. It showed up in iOS a year later and today it's a staple of web design, often appearing in the top-left or the top-right corner of webpages and providing an easy place to store larger menus without cluttering valuable webspace.
Hamburger Button Bun-efits and Drawbacks
Not everyone is sold on the role of hamburger buttons — also called hamburger menus — on websites at large. Detractors say this bun is overdone, sighting concerns such as:
Lack of universality — Despite broad familiarity, not every user knows what a hamburger button is, or what it does, making it unlikely they'll click through to see other website options.
Low engagement — Navigation bars with clear menu icons are easy to see, recognize, and use. Hamburger buttons don't stand out and don't earn the same level of engagement from users.
Lacking importance — Hamburger harangues make the case that anything behind the burger isn't as important as everything else on your site, or it would find a home on the front page.
But there are also benefits to deploying bun-based menus on your site, including:
Clean look — The burger button takes up almost no space, making it easy to place anywhere on your page without distracting from other key elements. Users know what it looks like, meaning you can put more time and effort into other design elements.
Consistent function — This three-line menu does one thing, and one thing really well. This makes it a great addition for consistency in website design — while it might not be flashy, it offers solid functionality.
Clear purpose — Not everything belongs on the front page of your website. The hamburger menu provides a predefined place for navigational elements that aren't a top priority but are still worth keeping close at hand.
How to Make a Hamburger Button in CSS
Ready to try your hand at burger-making? Thankfully, creating a hamburger button in CSS isn't terribly complicated.
If you'd prefer to create CSS code in a standalone editor, try options like RapidCSS or Stylizer. RapidCSS is quick, lightweight and well-suited to users with some CSS experience. Stylizer offers a more GUI-friendly format and comes with immediate preview options to ensure the code you write delivers the results you want.
If you'd rather code in-platform, one of the simplest options is WordPress. First, log into your account, find "Appearance" on the left-hand sidebar and then click "Customize".
Now it's time to build that burger. Let's say you want to build a static icon. According to W3Schools, the best place to start is with HTML:
This code provides the basis for your hamburger button.
Next, add your CSS:
The result is a standard, static hamburger button that leads to a menu once clicked.
Cooking Up a Dynamic Button with CSS
If you'd like to try your hand at something a little more complicated, consider an animated menu button that converts into a "cancel" icon when clicked. Here's how it starts:
Click to open the menu, and it turns into this:
The benefit here? Users not only get access to your burger-based menu, but understand how to make it disappear using the universal "X" for cancel.
To cook up this dynamic option, start with your HTML:
Now, add your CSS:
Building a Burger Button Without Code
Of course, not everyone wants to spend time and effort creating a hamburger button that may or may not get clicked by users. Some website owners simply aren't comfortable with CSS and HTML coding, while others prefer to prioritize content creation or main page layouts.
If that's your preference, consider website building tools that offer built-in burger options.
Do it all with HubSpot CMS. Build a great website that suits your needs and captures your target market, and make sure everything is working as intended with traffic monitoring and marketing campaign integration. Hamburger buttons come standard.
Simple is the name of the game for this website builder. Site123 isn't fancy — it's free and makes it easy to integrate hamburger menus into your web design.
Hamming it Up
Not everyone loves the hamburger button.
It makes sense; the menu can cause confusion or put critical navigation options just out of reach. But there are burger benefits: Building your own button or using a website builder tool lets you decide where this menu makes the most impact and gives you total control over navigation on your site.
Originally published May 11, 2020 2:04:36 PM, updated May 11 2020