<div class="menu-btn extra">
  <div class="hamburger"></div>
</div>

$color_bg: #55a;
$color_main: #fff;
$color_secondary: #f77;

div.menu-btn {
  width: 5em;
  height: 5em;
  padding: 1em;
  cursor: pointer;
  position: relative;
  background: $color_secondary;
}

.extra {
  box-shadow: 0 4px 5px rgba(0,0,0,0.5);
}

.h-line {
  background: $color_main;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1em;
  transition: all 0.333s;
}

.hamburger {
  @extend .h-line;
  height: 20%;
  width: 90%;
  position: absolute;
  left: 5%;
  top: 0;
  margin-top: 40%;
  margin-bottom: 40%;
  &:after {
    @extend .h-line;
    content: '';
    position: absolute;
    transform: translateY(150%);
  }
  &:before {
    @extend .h-line;
    position: absolute;
    content: '';
    transform: translateY(-150%);
  }
  &.closed {
    background: transparent;
    &:before {
      transform: rotate(45deg);
      width: 100%;
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
}

body {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: $color_bg;
}

$(".menu-btn").click( function() {
  $(this).children(".hamburger").toggleClass("closed");
});