Making a hamburger icon with pure css

Hamburger icon is used across all platforms, initially people were using it for mobile devices but now it is used on regular websites as well for indicating menu.

Since this hamburger icon spread ed across all devices and everybody knows what that icons means -- something hidden in there (i.e menu) or some options, So, I spent few minutes to code that with css.

Lets see how to make an hamburger icon with css

1. HTML for making a hamburger icon

The div with class name .hamburger is a wrapper, and I made a div for each horizontal stripe.

<div class="hamburger">
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
</div>

2. Adding css to it

Specify width to the wrapper and some padding.

Give some space between the stripes with some margin.

.hamburger {
    width:35px;
    background-color:#ff6600;
    padding:3px;
}
.stripe {
    width:100%;
    height:5px;
    background-color:#f5f5f5;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:1px;
}

Demo available here: http://jsfiddle.net/mannemvamsi/7qk3nwkc/

Also checkout

How to place any element vertically center

Best CSS for BUTTONS

Some useful CSS generators and tools