<div class="openbtn01">
   <span></span>
   <span></span>
   <span></span>
</div>

@charset "utf-8";

.openbtn01{
  position: relative;
  background:#57a2c7;
  cursor: pointer;
  width: 50px;
  height:50px;
  border-radius: 5px;
  span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background: #fff;
    width: 22px;
    &:nth-of-type(1){
      top:15px; 
    }
    &:nth-of-type(2){
      top:23px; 
    }
    &:nth-of-type(3){
      top:31px; 
    }
  }
  &.active{
    span{
      &:nth-of-type(1){
        top: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 22px;
      }
      &:nth-of-type(2){
        opacity: 0;
      }
      &:nth-of-type(3){
      top: 30px;
      transform: translateY(-6px) rotate(45deg);
      width: 22px;
      }
    }
  }
}


/*========= レイアウトのためのCSS ===============*/

body{
  background:#f3f3f3;
    padding:20px;
}


View Compiled
const btn = document.getElementsByClassName('openbtn01')[0];

btn.addEventListener('click',function(){
  this.classList.toggle('active');
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js