JSFiddle - React, Tailwind, and code Playground

by Arjun Singh

HTML

<div aria-hidden="true" class="nav-button__icon">
  <div class="bar">
    <div class="content"></div>
  </div>
  <div class="bar">
    <div class="content"></div>
  </div>
  <div class="bar">
    <div class="content"></div>
  </div>
</div>

SCSS

body{
  background: black;
}

.nav-button__icon{
  background: black;
  border-radius: 2px;
  display: inline-flex;
  height: 14vw;
  width: 14vw;
  padding: 8px;
  
  align-items: center;
  justify-content: center;
  
  --gap: 8px;
  
  --bar-height: 10px;
  
  gap: var(--gap);
  flex-direction: column;
  
  &:focus{
    filter: drop-shadow(0 1px 2px #2672de);
  }
  
  .bar{
    
    height: var(--bar-height);
    width: 100%;
    transform-origin: center;
    transition: 0.25s ease transform;
    
    .content{
      transition: 0.25s ease transform;
      background-color: #2672de;
      transform-origin: center;
      height: 100%;
    }
  }
  
  &:hover{
    --translatepos: calc(var(--bar-height) + var(--gap));
    --translateneg: calc(var(--translatepos) * -1);
    .bar:first-of-type{
      
      transform: translateY(var(--translatepos));
      
      .content{
        transform: rotate(45deg);
      }
    }
    
    .bar:nth-of-type(2){
      transform: scale(0);
    }
    
    .bar:last-of-type{
      transform: translateY(var(--translateneg));
      
      .content{
        transform: rotate(-45deg);
      }
    }
  }
}