Hamburger Button HTML/CSS

hamburger.html

<div class="nav-icon">
  <div></div>
</div>



https://codepen.io/chriskavanagh/pen/zYYjZGq

styles.css

.nav-icon {
  margin: 1em;
  width: 40px;  
}

.nav-icon::after,
.nav-icon::before, 
.nav-icon div {
  background-color: red;
  border-radius: 3px;
  content: '';
  display: block;
  height: 5px;
  margin: 7px 0;
  transition: all .2s ease-in-out;
}

.nav-icon:hover::before {
  transform: translateY(12px) rotate(135deg);
}

.nav-icon:hover::after {
  transform: translateY(-12px) rotate(-135deg);
}

.nav-icon:hover div {
  transform: scale(0);
}