HTML: <div class="hamburger-menu"> <div class="bar top"></div> <div class="bar middle"></div> <div class="bar bottom"></div> </div> CSS: .hamburger-menu { display: flex; flex-flow: column wrap; justify-content: space-between; height: 2.5rem; width: 2.5rem; cursor: pointer; } .hamburger-menu .bar { height: 5px; background: black; border-radius: 5px; margin: 3px 0px; transform-origin: left; transition: all 0.5s; } .hamburger-menu:hover .top { transform: rotate(45deg); } .hamburger-menu:hover .middle { opacity: 0; } .hamburger-menu:hover .bottom { transform: rotate(-45deg); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter