Menu (Hamburger) Button using CSS

• Download test - 558 B

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:

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