HTML
<span class="checkbox"> <input type="checkbox"> <label data-on="ON" data-off="OFF"></label> </span>CSS
.checkbox { display:inline-block; position:relative; text-align:left; width:60px; height:30px; background-color:#222; overflow:hidden; -webkit-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1); -moz-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1); box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1); -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; } .checkbox input { display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; margin:0 0; cursor:pointer; opacity:0; filter:alpha(opacity=0); z-index:2; } .checkbox label { background-color:#3c3c3c; background-image:-webkit-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2)); background-image:-moz-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2)); background-image:-ms-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2)); background-image:-o-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2)); background-image:linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2)); -webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7); -moz-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7); box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; display:inline-block; width:40px; text-align:center; font:bold 11px/28px Arial,Sans-Serif; color:#999; text-shadow:0 -1px 0 rgba(0,0,0,0.7); -webkit-transition:margin-left 0.2s ease-in-out; -moz-transition:margin-left 0.2s ease-in-out; -ms-transition:margin-left 0.2s ease-in-out; -o-transition:margin-left 0.2s ease-in-out; transition:margin-left 0.2s ease-in-out; margin:1px; } .checkbox label:before { content:attr(data-off); } .checkbox input:checked + label { margin-left:19px; background-color:#034B78; color:white; } .checkbox input:checked + label:before { content:attr(data-on); }