CSS Toggle Switch (no js) - Just add the class 'active' to make the switch transition to ON state, remove to return to OFF state. Similar to http://codepen.io/smt/pen/oywvG, but uses a checkbox input rather than a link, which removes the JS requirement. T

index.html

<form>
  <div class="toggle">
    <input type="checkbox" name="toggleSwitch" id="toggleSwitch" />
    <label for="toggleSwitch">&zwj;</label>
  </div>
</form>

style.scss

@import "compass";
.toggle {
  font-size: 100px;
  position: relative;
  width: 5.25em;

  label {
    background: #36f;
    @include border-radius(1em);
    color: #fff;
    cursor: pointer;
    display: block;
    font-family: Helvetica;
    line-height: 1.666666667;
    margin: 1em;
    padding: 0 1em;
    text-align: right;
    text-decoration: none;
    text-transform: uppercase;
    @include transition(background 120ms linear);
    width: 3.25em;
    &:after {
      content: 'off';
    }
  }
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: #f4f4f4;
    @include background(linear-gradient(top, #f4f4f4, #d4d4d4));
    @include border-radius(50%);
    @include box-shadow(#333 0 0.05em 0.35em);
    cursor: pointer;
    display: block;
    font-size: 100px;
    height: 2.5em;
    left: 10%;
    margin: -1.25em 0 0;
    position: absolute;
    top: 50%;
    @include transform(translate3d(0,0,0));
    @include transition(transform 120ms linear);
    width: 2.5em;
    &:checked {
      @include transform(translate3d(360px,0,0));
      + label {
        background: #f63;
        text-align: left;
        &:after {
          content: 'on';
        }
      }
    }
  }
}

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