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.