animated mobile button - http://codepen.io/d_kim/pen/mBfeL

index.jade

.box
  .btn

mobile-menu-button.markdown

mobile menu button

A Pen by D.K. on CodePen.

License.

script.js

$(document).ready(function() {

  $('.box').click(function() {
    $(this).toggleClass('active');
  });
  
});

style.scss

.box {
  width: 50px;
  height: 50px;
  margin: 3em auto;
  background: #eee;
  border-radius: .4em;
  cursor: pointer;
  transition: all .3s ease;
  
  &:hover {
    background: lighten(#eee, 5%);
  }
  
}

.btn, .btn:before, .btn:after {
  width:  6px;
  height: 6px;
  border-radius: 50%;
  background: #555;
  transition: all .3s ease;
}

.btn {
  margin: 0 auto;
  position: relative;
  top: 22px;
  
  &:before, &:after {
    content: '';
    position: absolute;
  }
  
  &:before {
    left: -12px;
  }
  
  &:after {
    left: 12px;
  }
  
}

.box.active {
  
  .btn, .btn:before, .btn:after {
  height: 30px;
  border-radius: 3px;
  }
  
  .btn {
    transform: translateY(-11px);
    background: transparent;
  }
  
  .btn:before {
    transform: translateX(12px) rotate(225deg);
  }
  
  .btn:after {
    transform: translateX(-12px) rotate(-225deg);
  }
  
}