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.

What a hamburger button looks like.

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?

Download Now: Free Intro Guide to HTML & CSS

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

Making a hamburger button in WordPress dashboard.

Image Source

Head to the bottom of the new left-hand side menu and select "Additional CSS".

Using CSS to add a hamburger button.

Image Source

Finally, you'll see a CSS editor page that lets you enter and test CSS code before pushing it to your site.

Test CSS code before publishing to your site.

Image Source

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:

Using HTML to create a hamburger button.

This code provides the basis for your hamburger button.

Next, add your CSS:

Add CSS to your HTML code.

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:

A non dynamic hamburger button.

Click to open the menu, and it turns into this:

A dynamic hamburger button.

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:

Add HTML to create animated hamburger button.

Now, add your CSS:

Dynamic hamburger button CSS.

Finally, toss in some JavaScript:

Java script in dynamic hamburger button.

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.

1. HubSpot CMS

HubSpot CMS for building your website.

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.

2. Squarespace

Squarespace website builder

Design clean, fresh-looking designs with Squarespace templates, and use their simple hamburger menus to hold second-tier navigation options.

3. Webnode

Webnode website builder.

40 million users have built sites with Webnode — add or change content with just a few clicks, and quickly customize the placement and drop-down options of any hamburger menus.

4. Site123

Site123 website builder.

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.

New Call-to-action

 css introduction

Originally published May 11, 2020 2:04:36 PM, updated May 11 2020


Website Design