//Should work perfectly in every browser! :D
.switch 
 .span OFF
 
%a{:href => "https://dribbble.com/shots/970569-Switches"} Original Shot here!

@import "compass/css3";

//Clean code?
$bg:#e8ebf2;
$off:#8b8b8b;
$switch:#eee;
$shadow:#6f6f6f;
$on:#9bc148;
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body{
  background:$bg;
  a{
  font-family: 'Montserrat', sans-serif;
  color:$off;
  text-decoration:none;
}
}

.switch{
  position: absolute;
  height:60px;
  width:170px;
  background:$off;
  cursor:pointer;
  @include transform(skew(-30deg));
  @include border-radius(3px);
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  @include transition(all 0.2s ease-out);
  text-indent:45%;
  line-height:60px;
  @include box-shadow(0px 0.5px 2.5px $shadow );
  .span{
    font-family: 'Montserrat', sans-serif;
    @include transform(skew(30deg));
    @include transition(all 0.2s ease-out);
    font-size:30px;
    z-index:-1;
    color:#666;
  }
  &:before{
    @include transition(all 0.2s ease-out);
    position: absolute;
    content:"";
    height:55px;
    width:40px;
    top:2.5px;
    left:2.5px;
    cursor:pointer;
    background:$switch;
    @include border-radius(3px);
    @include box-shadow(2.5px 0 5px $shadow );
  }
  &.active{
     @include transform(skew(30deg));
    background:$on;
    .span{
      @include transform(skew(-30deg));
      text-indent:20%;
      color:$switch;
    }
    &:before{
      left:127.5px;
      @include box-shadow(-2.5px 0px 5px $shadow );
    }
  }
}

//Li'l bit :)
//Please heart and follow me :) !
$(".switch").on('click', function(){
  $(this).toggleClass("active");
  if ($('.span').text() == "ON")
       $('.span').text("OFF")
    else
       $('.span').text("ON");
});