Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Perthz.

CSS Animated Sandwich Icon

After seeing Apple Inc. did this, I just want to do the simple version using only CSS.

A Pen by Perthz on CodePen.

License.

GIF Demo

#sandwich
.sw-topper
.sw-bottom
body {background-color: #333;}
#sandwich
width: 100px
height: 100px
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
.sw-topper
position: relative
top: 0
width: 100px;
height: 10px;
background: rgb(255, 255, 255);
border: none;
border-radius: 4px 4px 4px 4px;
transition: transform 0.5s, top 0.2s;
/* transition-delay: 0.2s, 0s; */
.sw-bottom
position: relative
top: 20px
width: 100px
height: 10px
background: rgb(255, 255, 255);
border: none;
border-radius: 4px 4px 4px 4px;
transition: transform 0.5s, top 0.2s;
transition-delay: 0.2s, 0s;
#sandwich:hover
.sw-topper
top: 15px;
transform: rotate(140deg);
.sw-bottom
top: 5px;
transform: rotate(-140deg);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.