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

body{
  background:#eeeeee;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

.m_button{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  cursor:pointer;
  background-color:#eeeeee;
  width:80px;
  height:80px;
  border-radius:10px;
  box-shadow: -7px -7px 20px 0px #fff9,
              -4px -4px 5px 0px #fff9,
              7px 7px 20px 0px #0002,
              4px 4px 5px 0px #0001,
              inset 0px 0px 0px 0px #fff9,
              inset 0px 0px 0px 0px #0001,
              inset 0px 0px 0px 0px #fff9,
              inset 0px 0px 0px 0px #0001;
  transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
  span{
    background-color:lightcoral;
    box-shadow: 0px 0px 10px 0px rgba(240,128,128,0.3);
    width:40px;
    height:4px;
    border-radius:4px;
    margin:3px 0px 3px 0px;
    transition:margin 0.4s cubic-bezier(.79,.21,.06,.81),transform 0.4s cubic-bezier(.79,.21,.06,.81);
  }
    
  span:nth-child(2){
    transform-origin:50% 50%;
  }
}

.active .m_button{
  box-shadow: 0px 0px 0px 0px #fff9,
              0px 0px 0px 0px #fff9,
              0px 0px 0px 0px #0001,
              0px 0px 0px 0px #0001,
              inset -7px -7px 20px 0px #fff9,
              inset -4px -4px 5px 0px #fff9,
              inset 7px 7px 20px 0px #0003,
              inset 4px 4px 5px 0px #0001;
  span{
    margin:-2px;
  }
  span:nth-child(1){
    transform:rotate(-45deg);
    
  }
  span:nth-child(2){
    transform:scale(0)
  }
  span:nth-child(3){
    transform:rotate(45deg)
  }
}

  $(".m_button").click(function() {
    $('body').toggleClass("active");
  });