<p> <label class="switch"> <input type="checkbox" /> <span class="label"> <span class="on">ON</span ><span class="separator"></span ><span class="off">OFF</span> </span> </label> </p> <p> <label class="switch"> <input type="checkbox" checked /> <span class="label"> <span class="on">ON</span ><span class="separator"></span ><span class="off">OFF</span> </span> </label> </p>
.switch { border: solid 1px #ccc; border-radius: 20px; display: inline-block; height: 40px; overflow: hidden; -ms-user-select: none; -moz-user-select: none; -o-user-select: none; -webkit-user-select: none; user-select: none; width: 100px; } .switch [type=checkbox] { display: none; } .switch .label { cursor: pointer; margin-left: -60px; -ms-transition: margin .1s; -moz-transition: margin .1s; -o-transition: margin .1s; -webkit-transition: margin .1s; transition: margin .1s; white-space: nowrap; } .switch :checked + .label { margin-left: 0; } .switch .label > * { vertical-align: top; } .switch .on, .switch .off { display: inline-block; height: 40px; line-height: 40px; text-align: center; width: 80px; } .switch .on { background-color: #00f; background-image: -ms-linear-gradient( top, hsl(214,90%,40%), hsl(214,90%,70%) ); background-image: -moz-linear-gradient( top, hsl(214,90%,40%), hsl(214,90%,70%) ); background-image: -o-linear-gradient( top, hsl(214,90%,40%), hsl(214,90%,70%) ); background-image: -webkit-linear-gradient( top, hsl(214,90%,40%), hsl(214,90%,70%) ); background-image: linear-gradient( top, hsl(214,90%,40%), hsl(214,90%,70%) ); box-shadow: 3px 2px 10px rgba(0,0,0,.2) inset, -3px 2px 10px rgba(0,0,0,.2) inset; color: #fff; text-shadow: -1px -1px rgba(0,0,0,.3); } .switch .separator { background-color: #eee; border: solid 1px #999; border-radius: 50%; box-sizing: border-box; box-shadow: 1px 2px #fff inset, -1px 2px #fff inset, 1px 1px 5px rgba(0,0,0,.2); display: inline-block; height: 40px; margin: 0 -20px; position: relative; width: 40px; } .switch .off { background-color: #eee; box-shadow: 5px 5px 10px rgba(0,0,0,.2) inset; color: #777; text-shadow: 1px 1px #fff; }