ON/Off Toggle

On/off toggle in pure css

by clawfire

HTML

<input type="checkbox" />
<p>
    Pure CSS on/off toggle using just one element (a checkbox)<br />
    This can work in all browsers, but for now, it has been implemented for;<br />
    <img src="http://www.roboformchrome.com/my-plugins/icons/google-chrome.gif" alt="Chrome" />
    <img src="http://kyleabaker.com/wp-content/plugins/wp-useragent/img/16/net/safari.png" alt="Safari" />
</p>

CSS

body {
    background: #f9f9f9;
    text-align: center;
    font: 11px sans-serif;
    text-shadow: 0 1px 1px #fff;
}
input::after {
    content: '';
    margin: 0; 
    padding: 0;
    width: 39px;
    height: 25px;
    background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #f0f0f0;
    position: absolute;
    top: 0; left: 53px;
    border: 1px solid #919191;
    -webkit-transition: 1s all linear;
}
input::before {
    content: 'ON';
    margin: 0; 
    padding: 0;
    width: 55px;
    height: 25px;
    background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    border-radius: 3px;
    border: 1px solid #1654b5;
    box-shadow: inset 0 2px 2px #2a5bb3,
                inset -3px 0 3px #2a5bb3;
    text-align: center;
    color: #fff;
    font: 700 14px sans-serif; 
    text-shadow: 0 -1px 0 #1b3b6f;
    line-height: 27px;
    position: absolute;
    top: 0; left: 0;
}
input {
    -webkit-appearance: none;
    margin: 10px auto; 
    padding: 0;
    display: block;
    width: 94px;
    height: 27px;
    position: relative;
    border-radius: 3px 0 0 3px;
    -webkit-transition: 1s all linear;
}
input:checked::after {
    left: 0;
}
input:checked::before {
    content: 'OFF';
    left: 37px;
    background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    box-shadow: inset 0 2px 2px #b6b6b6,
                inset 3px 0 3px #b6b6b6;
    color: #7f7f7f;
    text-shadow: none;
    border-color: #7d7d7d
}