IOS slide toggle

Slider toggle CSS only

HTML

<label>Toggle
    <input type="checkbox" class="ios-switch" />
    <div class="switch"></div>
    <div class="switch"></div>
</label>

CSS

input[type="checkbox"] {
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0
}
input[type="checkbox"].ios-switch + div {
    display: inline-block;
    vertical-align: middle;
    width: 3em;
    height: 1em;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 999px;
    margin: 0 .5em;
    background: white;
    background-image: -moz-linear-gradient(top, rgba(15, 84, 153, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(15, 84, 153, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    background-image: -webkit-linear-gradient(top, rgba(15, 84, 153, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -o-linear-gradient(top, rgba(15, 84, 153, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -ms-linear-gradient(top, rgba(15, 84, 153, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: linear-gradient(to bottom, rgba(15, 84, 153, 0) 0%, rgba(255, 255, 255, 1) 100%);
    -webkit-background-size: 200% 100%;
    background-size: 200% 100%;
    background-position: 100% 0;
    background-origin: border-box;
    background-clip: border-box;
    overflow: hidden;
    transition-duration: .4s;
    -webkit-transition-duration: .4s;
    transition-property: padding, width, background-position, text-indent;
    -webkit-transition-property: padding, width, background-position, text-indent;
    -webkit-box-shadow: 0 .1em .1em rgba(0, 0, 0, .2) inset, 0 .45em 0 .1em rgba(0, 0, 0, .05) inset;
    box-shadow: 0 .1em .1em rgba(0, 0, 0, .2) inset, 0 .45em 0 .1em rgba(0, 0, 0, .05) inset;
    font-size: 150%;
}
input[type="checkbox"].ios-switch:checked + div {
    padding-left: 2em;
    width: 1em;
    background-position: 0 0;
    background: #5281AF;
}
input[type="checkbox"].ios-switch + div:before {
    content:'On';
    float: left;
    width: 1.65em;
    height: 1.65em;
    margin: -.1em;
    border: 1px solid rgba(0, 0, 0, .35);
    border-radius:...