<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
.burger
margin: 50px
width: 40px
height: 30px
position: relative
cursor: pointer
span
display: block
height: 4px
width: 100%
background: #000
position: absolute
transition: 0.5s
&:nth-child(1)
top: 0
transition-delay: 0.5s
&:nth-child(2)
top: 50%
left: 50%
margin-left: -20px
margin-top: -2px
&:nth-child(3)
bottom: 0
transition-delay: 0.5s
&:hover
span
&:nth-child(1)
transform: rotate(45deg)
transform-origin: 50% 50%
top: 50%
margin-top: -2px
&:nth-child(2)
width: 0
margin-left: 0
&:nth-child(3)
transform: rotate(-45deg)
transform-origin: 50% 50%
bottom: 50%
margin-bottom: -2px