CSS Toggle Switch - Just add the class 'active' to make the switch transition to ON state, remove to return to OFF state.

index.html

<a href="#" class="toggle"><b class="handle"></b></a>

script.js

$('.toggle').on('click', function (e) {
  e.preventDefault();
  $(this).toggleClass('active');
  return false;
});

style.scss

@import "compass";
.toggle {
  background: #36f;
  @include border-radius(1em);
  color: #fff;
  display: block;
  font-family: Helvetica;
  font-size: 100px;
  line-height: 1.666666667;
  margin: 1em;
  padding: 0 1em;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  @include transition(background 120ms);
  width: 3.25em;
  &:before {
    content: 'off';
    display: block;
    text-align: right;
  }
  &.active {
    background: #f63;
    &:before {
      content: 'on';
	    text-align: left;
    }
  }
  .handle {
    background: #f4f4f4;
    @include background(linear-gradient(top, #f4f4f4, #d4d4d4));
    @include border-radius(50%);
    @include box-shadow(#333 0 0.05em 0.35em);
    display: block;
    height: 2.5em;
    left: -10%;
    margin-top: -1.25em;
    position: absolute;
    top: 50%;
    @include transition(left 120ms);
    width: 2.5em;
  }
  &.active .handle {
    left: 70%;
  }
}

Source at http://codepen.io/smt/pen/oywvG

Love it.