<h1>Open / Close Button Animation</h1>
<p>Tap or click the button below to trigger the animation</p>

<div class="button open">
  <div class="line left"></div>
  <div class="line right"></div>
</div>

@import url(https://fonts.googleapis.com/css?family=Raleway);

body{
  font-family: 'Raleway', sans-serif;
  text-align: center;
  background: #915979;
  color: #FFF;
  
  transition: 0.3s all ease-in;
  
  &.open{
    background: #2C85C4;
  }
}

h1, h2, h3, h4, h5, h6, p{
  margin: 0 0 10px 0;
}

div.button{
  height: 40px; width: 40px; position: relative;
  margin: 0 auto; cursor: pointer;
  
  div.line{
    width: 5px; height: 32px; background: #FFF;
    border-radius: 3px; display: block;
    position: absolute; top: 0;

    &.left{
      -webkit-transform: rotateZ(-45deg);
      left: 20px;
    }

    &.right{
      -webkit-transform: rotateZ(45deg);
      left: 20px;
    }

    transition: all 0.3s cubic-bezier(.87,.39,.74,1.31);
  }
  
  &.open{
    div.line.left{
      left: 10px;
    }
    
    div.line.right{
      left: 30px;
    }
  }
}

jQuery(document).ready(function(){
  $('div.button').on('click', function(){
    $(this).toggleClass('open');
    $('body').toggleClass('open');
  });
});