<div class="menu-wrapper">
  <p class="menu-btn"></p>
</div>

body {
  background-color: #333;
}

.menu-wrapper {
  border: 1px solid #ccc;
  width:50px;
  height: 50px;
  cursor: pointer;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 25px rgba(0, 0, 0, .5) inset;
  transition: all .3s ease-out;
}

.menu-btn, .menu-btn:before, .menu-btn:after {
  height: 4px;
  width: 34px;
  background-color: #fff;
  margin: 23px 8px;
  border-radius: 3px;
  -webkit-transition: all 0.5s ease;
}
.menu-btn:before, .menu-btn:after {
  content: " ";
  position: absolute;
  margin-top: -10px;
  margin-left: 0;
  -webkit-transform: rotateZ(0deg);
  -webkit-transform-origin: 3px 3px;
}
.menu-btn:after {
  margin-top: 10px;
}

.menu-btn-on {
  background-color: transparent;
  margin-left: 12px;
}
.menu-btn-on.menu-btn:before {
  -webkit-transform: rotateZ(45deg);
  background-color: #ff0000;
}
.menu-btn-on.menu-btn:after {
  -webkit-transform: rotateZ(-45deg);
  background-color: #ff0000;
}
.menu-wrapper-on {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
}

$('.menu-wrapper').on('click', function(){
  var menuBtn = '.menu-btn';
  var menuBtnOn = 'menu-btn-on';
  var menuWrapOn = 'menu-wrapper-on';
  if($(this).hasClass(menuWrapOn)){
    $(this).removeClass(menuWrapOn);
  } else {
    $(this).addClass(menuWrapOn);
  }
  if($(menuBtn).hasClass(menuBtnOn)){
    $(menuBtn).removeClass(menuBtnOn);
  } else {
    $(menuBtn).addClass(menuBtnOn);
  }
});