Semantic slider switch

slider-switch.css

/* slider switch */
.switch {
  display: block !important;
	background: -moz-linear-gradient(left, #e0f0fa 0%, #e0f0fa 50%, #d3d7d7 50%, #d3d7d7 100%); 
	background: -webkit-linear-gradient(left, #e0f0fa 0%,#e0f0fa 50%,#d3d7d7 50%,#d3d7d7 100%); 
	background: -ms-linear-gradient(left, #e0f0fa 0%,#e0f0fa 50%,#d3d7d7 50%,#d3d7d7 100%); 
	background: linear-gradient(to right, #e0f0fa 0%,#e0f0fa 50%,#d3d7d7 50%,#d3d7d7 100%);
	box-shadow: inset 0 1px @light-input-shadow;
	cursor: pointer;
	height: 3em;
    width: 8em;
    -webkit-appearance: none;
    -webkit-transition: .25s;
	position: relative;
	border: 1px solid @light-border;
	border-radius: @border-radius;
}


.switch:before {
	content: 'OFF';
	position: absolute;
	top: 1.5em/2;
	right: 1em;
}

.switch:after {
	display: block !important;
    background-color: #e5e9e9;
    border-radius: @border-radius;
	box-shadow: inset 0 1px @light-box-shadow,
				1px 0 rgba(0,0,0,0.24);
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: relative;
    top: 0;
    width: 4em;
}

.switch:checked {
/*    background-position: 0 0, 35px 0;*/
    padding-left: 3.8em;
}


.switch:checked:before {
	content: 'ON';
	left: 1.25em;
	color: @light-cta-down;
}

.switch:checked:after {
	box-shadow: inset 0 1px @light-box-shadow,
				-1px 0 rgba(0,0,0,0.24);
}

slider-switch.html

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