Click here to Skip to main content
15,172,754 members
Articles / Web Development / HTML
Posted 15 Nov 2014

Tagged as


7 bookmarked

Menu (Hamburger) Button using CSS

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
16 Nov 2014CPOL
How to create the hamburger menu button using CSS


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:

Using the Code

Here is the CSS code:

    margin: 0;
    width: 28px;
    height: 28px;
    padding: 14px;
    font-size: 30px;
    color: #666666;
    cursor: pointer;    
    border: 1px solid gray;

    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.


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


About the Author

Igor Krupitsky
Web Developer
United States United States
Igor is a business intelligence consultant working in Tampa, Florida. He has a BS in Finance from University of South Carolina and Masters in Information Management System from University of South Florida. He also has following professional certifications: MCSD, MCDBA, MCAD.

Comments and Discussions

QuestionIE 8 Pin
Member 1124784619-Nov-14 10:39
MemberMember 1124784619-Nov-14 10:39 
AnswerRe: IE 8 Pin
Igor Krupitsky19-Nov-14 21:03
mvaIgor Krupitsky19-Nov-14 21:03 
GeneralMy vote of 5 Pin
Tokinabo17-Nov-14 11:28
professionalTokinabo17-Nov-14 11:28 
SuggestionWrong Article Type Pin
DaveAuld16-Nov-14 1:54
professionalDaveAuld16-Nov-14 1:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.