<div class="cntr">
  <div class="cntr-innr">
    <div class="menu-toggle">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <p>Hover to see the magic.</p>
  </div>
</div>

/*** COLORS ***/
@bg-color: #F26F70;
@txt-color: #FFFFFF;
@box-color: #FFFFFF;
@bar-color: #F26F70;

/*** DEMO ***/
html,body{height:100%;margin:0;}body{background:@bg-color;font:13px monospace;color:@txt-color}p{margin-top:20px}.cntr{display:table;width:100%;height:100%;.cntr-innr{display:table-cell;text-align:center;vertical-align:middle}}

/*** STYLES ***/
.menu-toggle {
  display: inline-block;
  position: relative;
  width: 51px;
  height: 51px;
  background: @box-color;
  cursor: pointer;
  
  .bar {
    position: absolute;
    width: 41px;
    height: 5px;
    background: @bar-color;
    transition: all 300ms ease;
    
    &:nth-child(1) {
      left: 5px;
      top: 10px;
    }
    
    &:nth-child(2) {
      left: 5px;
      top: 23px;
      
      &:after {
        content: "";
        position: absolute;
        left: 0px;
        top: 0px;
        width: 41px;
        height: 5px;
        background: @bar-color;
        transition: all 300ms ease;
      }
    }
    
    &:nth-child(3) {
      right: 5px;
      top: 36px;
    }
  }
  
  &:hover {
    .bar {
      &:nth-child(1),
      &:nth-child(3){
        width: 0;
      }
    
      &:nth-child(2) {
        transform: rotate(-45deg);
        
        &:after {
          transform: rotate(-90deg);
        }
      }
    }
  }
}