JSFiddle - React, Tailwind, and code Playground

Drop this and the css in your site for fancy plus-sign animations!

by nilloc

HTML

<div class="menu">
  <span class="bar top"></span>
  <span class="bar middle"></span>
  <span class="bar bottom"></span>
</div>

SCSS

.menu{
  height:100px;
  width:100px;
  position:relative;
  cursor:pointer;
  
  .bar{
    transition:all 200ms ease-in-out;
    height:20%;
    width:100%;
    background:#0eeabe;
    position:absolute;
    top:40%;
    left:0%;

    &.middle{
      height:100%;
      width:20%;
      top:0%;
      left:40%;
    }
  }
  
  &:hover{
    .bar{
      &.top{
        top:0%;
      }
      &.middle{
        transform:rotate(90deg);
      }
      &.bottom{
        top:80%;
      }
    }
  }
  
  &:active, &.active{
    .bar{
      &.top, &.bottom{
        top:40%;
        left:0%;
        transform:rotate(45deg);
      }
      &.middle{
        transform:rotate(45deg);
      }
    }
  }
}