<i class="hamburger --one"></i>
<i class="hamburger --two"></i>
<i class="hamburger --three"></i>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.hamburger {
width: 200px;
height: 120px;
position: relative;
margin: 0 20px;
&::before,
&::after {
content: '';
position: absolute;
width: 100%;
height: 20px;
color: #333;
background-color: currentColor;
transition: all .45s ease-in-out;
}
&::before {
top: 0;
transform: rotate(0);
}
&::after {
bottom: 0;
box-shadow: 0 -50px currentColor;
}
}
/*
* Hamburger one on hover
*/
.hamburger.--one:hover {
&::before {
top: 50px;
transform: rotate(45deg);
}
&::after {
box-shadow: 0 0 transparent;
bottom: 50px;
transform: rotate(-45deg);
}
}
/*
* Hamburger two on hover
*/
.hamburger.--two {
transform: rotateY(0);
transition: all .45s .15s ease-in-out;
&:before, &:after {
transition: all .2s ease-in-out;
}
&:hover {
transform: rotateY(180deg);
&::before {
top: 50px;
transform: rotate(45deg);
}
&::after {
box-shadow: 0 0 transparent;
bottom: 50px;
transform: rotate(-45deg);
}
}
}
/*
* Hamburger three on hover
*/
.hamburger.--three {
transition: transform .55s .3s ease-in-out;
&:before,
&:after {
transition: all .3s ease-in-out;
}
&:before {
width: unset;
height: unset;
left: 0;
right: 0;
top: 50px;
bottom: 50px;
}
&:after {
top: 0;
bottom: unset;
box-shadow: 0 100px currentColor;
}
&:hover {
transform: rotate(45deg);
&:before {
left: calc(50% - 10px);
right: calc(50% - 10px);
top: -40px;
bottom: -40px;
}
&:after {
top: 50px;
box-shadow: 0 0px transparent;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.