Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Menu (Hamburger) Button using CSS

5.00/5 (2 votes)
16 Nov 2014CPOL 32.9K   454  
How to create the hamburger menu button using CSS

Introduction

This example shows how to create the hamburger menu button using CSS. It also does color transition when you mouse over. The first button is created using 3 div elements. The second button is created using Unicode character: 9776. You can download it here: Test.zip.

Using the Code

Here is the CSS code:

CSS
.hamburger-unicode{
    margin: 0;
    width: 28px;
    height: 28px;
    padding: 14px;
    font-size: 30px;
    color: #666666;
    cursor: pointer;    
    border: 1px solid gray;
}

.hamburger-unicode:hover{
    color: #8fc045;
    transition-property: color;
    transition-duration: 200ms;
}

.hamburger {
    margin: 0;
    padding: 15px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    border: 1px solid gray;
}

.hamburger div {
    margin: 4px 0;
    padding: 0;
    background-color: #666666;
    border-radius: 2px;
    border-style: none;
    height: 3px;
}

.hamburger:hover div {
    background: white;
    transition-property: background;
    transition-duration: 200ms;
}

.hamburger:hover {
    background: #414141;
    transition-property: background;
    transition-duration: 200ms;
}

Points of Interest

If you liked this, you might also be interested in how to create a "callout box" using CSS. http://cssarrowplease.com.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)