Reference

Code

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

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

.nav-icon::after,
.nav-icon::before,
.nav-icon div {
  background-color: #fff;
  border-radius: 3px;
  content: '';
  display: block;
  height: 5px;
  margin: 7px 0;
  color: black;
  transition: all 0.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);
}