Linear Gradient Menu Button

HTML

<nav id="bt-menu" class="bt-menu">
  <a href="#" class="bt-menu-trigger"><span></span></a>
</nav>

SCSS

* {
  margin: 0;
  padding: 0;
}

@mixin transition($args...) {
  -webkit-transition: $args;
     -moz-transition: $args;
       -o-transition: $args;
          transition: $args;
}

@mixin transform($args...) {
  -webkit-transform: $args;
     -moz-transform: $args;
       -o-transform: $args;
          transform: $args;
}

@mixin delay($args...) {
  -webkit-transition-delay: $args;
     -moz-transition-delay: $args;
       -o-transition-delay: $args;
          transition-delay: $args; 
}

@mixin select($args...) {
  -webkit-touch-callout: $args;
  -webkit-user-select: $args;
  -khtml-user-select: $args;
  -moz-user-select: $args;
  -ms-user-select: $args;
  user-select: $args;
}

@mixin linear($intial, $args...) {
  background: $intial;
  background: -webkit-linear-gradient($args);
  background:    -moz-linear-gradient($args);
  background:      -o-linear-gradient($args);
  background:         linear-gradient($args);
}

.bt-menu {
  width: 50px;
  
  .bt-menu-trigger {
    position: fixed;
    top: 0px;
    left: 0px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    
    span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 4px;
      margin-top: -2px;
      @include linear(#adadff, left, blue, transparent);
      font-size: 0px;
      @include select(none);
      
      &:before, &:after {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        @include linear(#adadff, left, blue, transparent);
        content: '';
      }
      
      &:before {
        @include transform(translateY(-250%));
      }
      
      &:after {
        @include transform(translateY(250%));
      }
    }
  }
  
  &.bt-menu-open {
    .bt-menu-trigger span {
      background: transparent;
      
      &:before {
        @include transform(translateY(0) rotate(45deg));
      }
      
      &:after {
        @include transform(translateY(0)...

JavaScript

var toggleOpenClose = 0;
var menuButton = $("#bt-menu");

menuButton.click(function() {
  if(toggleOpenClose % 2 == 0) {
  	menuButton.removeClass('bt-menu-close').addClass('bt-menu-open');
  	menuButton.children(".bt-menu-trigger").children("span").removeClass("close").addClass("open");
  } else {
  	menuButton.removeClass('bt-menu-open').addClass('bt-menu-close');
    menuButton.children(".bt-menu-trigger").children("span").removeClass("open").addClass("close");
  }
  
  toggleOpenClose++;
});

var time = 1;
var timeShortSlide = 0.8;

document.styleSheets[0].addRule(".bt-menu-trigger span.open", "transition: background " + timeShortSlide + "s; transition-delay: " + (time - timeShortSlide) + "s;");
	document.styleSheets[0].addRule(".bt-menu-trigger span.open:before", "transition: transform " + timeShortSlide + "s; transition-delay: " + (time - timeShortSlide) + "s;");
	document.styleSheets[0].addRule(".bt-menu-trigger span.open:after", "transition: transform " + timeShortSlide + "s; transition-delay: " + (time - timeShortSlide) + "s;");
	document.styleSheets[0].addRule(".bt-menu-trigger span.close", "transition: background " + timeShortSlide + "s;");
	document.styleSheets[0].addRule(".bt-menu-trigger span.close:before", "transition: transform " + timeShortSlide + "s;");
	document.styleSheets[0].addRule(".bt-menu-trigger span.close:after", "transition: transform " + timeShortSlide + "s;");