Simple Toggle Switch Button

Demo

Switch Button CSS

.switch{
    width:58px;
    height:24px;
    display:inline-block;
    position:relative
}

.switch-input{
    opacity:0;
    position:absolute;
    left:0;
    top:0;
}

.switch-label { 
    background: -moz-linear-gradient(center top , 
    #F5F5F5, #F1F1F1) repeat scroll 0 0 rgba(0, 0, 0, 0);
    transition: all 0.2s ease 0s;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    color: #FFFFFF;
    display: block;
    font-size: 13px;
    font-weight: 600;
    height: inherit;
    position: relative;
    text-shadow: 1px 0 1px #878787;
}

.switch-label:before{
    content:attr(dataOff);
    position:absolute;
    top:50%;
    line-height:1px;
    margin-top:-2px;
    margin-left:25px;
}

.switch-label:after{
    content:attr(dataOn);
    position:absolute;
    top:50%;
    line-height:1px;
    margin-top:-2px;
    margin-left:6px;
    opacity: 0;
}
.switch-handler {
    background: linear-gradient(to bottom, 
    #FFFFFF 40%, #F0F0F0) repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 0 3px #BFBFBF;
    height: 18px;
    left: 0;
    margin: 3px;
    position: absolute;
    top: 0;
    border-radius: 2px;
    transition: left 0.15s ease-out 0s;
    width: 18px;
}

.switch-handler:before {
    background: linear-gradient(to bottom, 
    #EEEEEE, #FFFFFF) repeat scroll 0 0 #F9F9F9;
    content: "";
    border-radius: 2px;
    height: 12px;
    margin: 3px;
    position: absolute;
    width: 12px;
}

.switch-input:checked ~ .switch-label {
   background: -moz-linear-gradient(center top , 
   #FDA352, #FB8F3D) repeat scroll 0 0 rgba(0, 0, 0, 0);
   border: 1px solid #FB8F3D;
  }

.switch-input:checked ~ .switch-label:before{
   opacity:0;
}

.switch-input:checked ~ .switch-label:after{
   opacity:1;
}
.switch-input:checked ~ .switch-handler{
   left:34px
}

Switch Button HTML

<label class="switch">

<input type="checkbox" class="switch-input"/>

<span class="switch-label" dataOff="OFF" dataON="ON"></span>

<span class="switch-handler"></span></label>