<button><span></span></button>
@function set-defaults($custom, $default) {
  $use: ("key":"value");
  @each $key, $value in $default {
    @if (map-has-key($custom, $key)) {
      $value: map-get($custom, $key);
      $use: map-remove($use, $key);
    }
    $use: map-merge($use,  ($key: $value));
  }
  @return map-remove($use, "key");
}
@mixin hamburger-btn($args) {
  $args: set-defaults(
    $args,

    (
      "w": 3rem,
      "h": 3rem,
      "x-offsets": 15px,
      "y-offsets": 15px,
      "stroke-width": 2px,
      "stroke-color": #ccc
    )
  );

  $w: map-get($args, "w");
  $h: map-get($args, "h");
  $stroke: map-get($args, "stroke-width");
  $stroke-color: map-get($args, "stroke-color");
  $x-offsets: map-get($args, "x-offsets");
  $y-offsets: map-get($args, "y-offsets");
  $transition: all 0.6s ease;
  $d: ($x-offsets * 2);
  $inner-w: calc(#{$w} - #{$d});
  border: none;
  box-shadow: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  width: $w;
  height: $h;
  box-sizing: content-box;
  padding: 0;
  position: relative;
  transition: all 0.5s ease;
  &:before,
  &:after {
    content: "";
  }
  span,
  &:before,
  &:after {
    background: $stroke-color;
    display: block;
    height: $stroke;
    padding: 0;
    width: $inner-w;
    position: relative;
    transition: $transition;
  }
  span {
  }
  &:before {
    top: $y-offsets;
    z-index: 0;
  }
  &:after {
    bottom: $y-offsets;
    z-index: 1;
  }
  &.active {
    span {
      background: none;
    }
    &:before,
    &:after {
      top: 50%;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
}

body {
  padding: 2rem;
}

button {
  background: mix(red, pink, 50%);
  border-radius: 5px;
  @include hamburger-btn((
			"w": 2.5rem,
			"h": 2.5rem,
			"stroke-width": 3px,
			"stroke-color": #fff,
			"x-offsets": 0.25rem,
			"y-offsets": 0.75rem
		));
  span {
    background-image: none !important;
  }
}
View Compiled
$(document).ready(function(){
  $('button').click(function(){
    $(this).toggleClass('active');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js