body
  
  .container
  
    span.active
  
    span.active
View Compiled

// Variables
$background: #9B59B6;

$line-color: #FFF;
$line-width: 20px;
$line-height: 3px;

// Mixin For Span Element
@mixin span($t) {
  transition: all $t + s cubic-bezier(.5, 10, .6, .1);
  display: block;
  cursor: pointer;
  box-shadow: 1px 1px 4px darken(#9B59B6, 4%);
}

// Mixin For Centering Elements
@mixin center {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

// Main Styles
html,body {
  background: $background;
}

.container {
  margin-top: 140px;
  transform: scale(3);
}

span {
  @include span(0.4);
}

.active {
  background: $line-color;
  width: $line-width;
  height: $line-height;
  margin-top: 4px;
  @include center;
}

.cross {
  background: $line-color;
  width: $line-width;
  height: $line-height;
  margin-top: 4px;
  display: block;
  @include center;
}

.cross:nth-of-type(1) {
  transform: rotate(45deg);
}

.cross:nth-of-type(2) {
  transform: rotate(-45deg);
  margin-top: -3px;
}
View Compiled
var span = $("span");

$("span").click(function() {

  if (span.hasClass("active")) {
    span.removeClass("active");
    span.addClass("cross");
  } else {
    span.removeClass("cross");
    span.addClass("active");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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