<span class='btn_3d'>
  <span>
    <span>
    </span>
  </span>
</span>

body {
  align-items: center;
  background-color: skyblue;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.btn_3d {
  display: block;
  margin: 0 auto;
  perspective: 300px;
  width: 75px;
  * {
    box-sizing: border-box;
  }
  > span {
    background: white;
    border: none;
    box-shadow: 1px 73px 41px -22px rgba(0,0,0,0.75);
    cursor: pointer;
    display: block;
    transform-style: preserve-3d;
    transition: all 250ms ease-in;
    transform: rotateX(40deg);
    outline: 1px solid transparent;
    padding: 18px;
    position: relative;
    width: 100%;
    &:after {
      background: #CCCCCC;
      content: "";
      height: 40%;
      left: 0;
      position: absolute;
      top: 100%;
      transform-origin: 0% 0%;
      transform: rotateX(-90deg);
      transition: all 250ms ease-in;
      width: 100%;
      z-index: -1;
    }
    > span {
      display: block;
      height: 40px;
      position: relative;
      transform: scale(0.9);
      width: 40px;
      &:before,
      &:after {
        content: "";
        border-radius: 2px;
        display: block;
        width: 85%;
        height: 25%;
        position: absolute;
        top: 37%;
        left: 8%;
        transition: 0.3s;
        background: black;
      }
      &:after {
        transform: rotate(90deg);
      }
    }
    &:hover,
    &:focus {
      background: #F6F6F6;
      box-shadow: 1px 73px 41px -22px rgba(0,0,0,1);
      color: #ED8728;
      transform: rotateX(30deg);
      &:after {
        background: #BEBEBE;
      }
      > span {
        &:before,
        &:after {
          width: 62%;
        }
        &:before {
          transform: rotate(180deg) translate(0, 0);
        }
        &:after {
          transform: rotate(-180deg) translate(-37.5%, 0);
        }
      }
    }
    &:active {
      transform: rotateX(20deg);
      > span:before,
      > span:after {
        background: skyblue;
      }
    }
  }
&.active  {
  > span > span {
    &:before,
    &:after {
      width: 62%;
    }
    &:before {
      transform: rotate(180deg) translate(0, 0);
    }
    &:after {
      transform: rotate(-180deg) translate(-37.5%, 0);
    }
  }
}  
}

$(document).ready(function() {
  $('.btn_3d').click(function() {
    $(this).toggleClass('active');
  });
});