<button class="menu-toggle">Menu</button>

$buttonWidth: 30px;
$buttonHeight: 26px;
$buttonColor: darken(#2B32B2, 15%);
$lineThickness: 4px;
$transitionSpeed: .25s;
$transitionEasing: ease-in-out;

// Demo
.menu-toggle {
  position: relative;
  display: block;
  width: $buttonWidth;
  height: $buttonHeight;
  
  background: transparent;
  border-top: $lineThickness solid;
  border-bottom: $lineThickness solid;
  
  color: $buttonColor;
  font-size: 0;
  
  transition: all $transitionSpeed $transitionEasing;

  &:before,
  &:after {
    content: '';
    display: block;
    width: 100%;
    height: $lineThickness;
    
    position: absolute;
    top: 50%;
    left: 50%;
    
    background: currentColor;
    
    transform: translate(-50%, -50%);
    transition: transform $transitionSpeed $transitionEasing;
  } 
}

button:hover {
  color: lighten($buttonColor, 15%);
}

button.is-active {
  border-color: transparent;

  &:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  &:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

// Page setup
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  background: #1488CC; 
  background: linear-gradient(to right, rgba(#2B32B2, .75), rgba(#1488CC, .75));
}

button {
  border: none;
  cursor: pointer;
  outline: none;
}

$('button').on('click', function() {
  $(this).toggleClass('is-active');
});