index.html

<hr>
<input type="checkbox" checked>
<hr>
<input type="checkbox">
<hr>
<input type="checkbox" checked>
<hr>

iOS 7 Toggle.markdown

iOS 7 Toggle

Works best in Chrome.

A Pen by Joshua Hibbert on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/css3";

html {
  padding: 100px;
  text-align: center;
}
hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin: 8px;
}

$white: #fff;
$green: #53d76a;
$grey: #d3d3d3;

input[type="checkbox"] {
  appearance: none;
  background-color: darken($white, 2%);
  border: 1px solid $grey;
  border-radius: 26px;
  box-shadow: inset 0 0 0 1px $grey;
  cursor: pointer;
  height: 28px;
  position: relative;
  transition: border .25s .15s,
              box-shadow .25s .3s,
              padding .25s;
  width: 44px;
  vertical-align: top;
  
  &:after {
    background-color: $white;
    border: 1px solid $grey;
    border-radius: 24px;
    box-shadow: inset 0 -3px 3px hsla(0,0%,0%,.025),
                0 1px 4px hsla(0,0%,0%,.15),
                0 4px 4px hsla(0,0%,0%,.1);
    content: '';
    display: block;
    height: 24px;
    left: 0;
    position: absolute;
    right: 16px;
    top: 0;
    transition: border .25s .15s,
                left .25s .1s,
                right .15s .175s;
  }
  &:checked {
    border-color: $green;
    box-shadow: inset 0 0 0 13px $green;
    padding-left: 18px;
    transition: border .25s,
                box-shadow .25s,
                padding .25s .15s;
  
    &:after {
      border-color: $green;
      left: 16px;
      right: 0;
      transition: border .25s,
                  left .15s .25s,
                  right .25s .175s;
    }
  }
}