Non-janky, mostly semantic slider-switch. Works for mobile, too!

switch.css

.slide-switch {
  position: relative; 
	width: 5.5em;
	display: inline-block;
	vertical-align: middle;
	-webkit-user-select:none; 
	-moz-user-select:none; 
	-ms-user-select: none;
	margin-left: 10px;
}

.light-slide-switch {
	display: inline-block; 
	overflow: hidden; 
	cursor: pointer;
	border-radius: 6px;
	border: 1px solid #a5a8a8; 
	width: 5.5em;

}
.on-off {
	width: 200%; 
	margin-left: -100%;
	-moz-transition: margin 0.2s ease-in 0s; 
	-webkit-transition: margin 0.2s ease-in 0s;
	-o-transition: margin 0.2s ease-in 0s; 
	transition: margin 0.2s ease-in 0s;
}

.on-off:before, .on-off:after {
	float: left; 
	width: 50%; 
	height: 3em; 
	padding: 0px; 
	border-radius: 4px;
	line-height: 3em;
	font-size: 16px; 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	overflow: hidden;
}


.on-off:before {
  content: "ON";
  padding-left: 1em;
  background-color: #e0f0fa; 
	box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
	color: #0083e8;
	text-shadow: 0 1px #fff;
}

.on-off:after {
  content: "OFF";
  padding-right: 1em;
  background-color: #D3D7D7; 
	box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.06);
	color: #000;
  text-align: right;
	text-shadow: 0 1px #fff;
}

.switch {
	width: 2em;
	margin: 0px;
  background: url("../img/light-grips.png") center center no-repeat #e5e9e8;
  border: 1px solid #a5a8a8; 
	background-size: 7px;
	height: 3em;
  box-shadow: inset 0 1px 0 white;
	border-radius: 6px;
  position: absolute; top: 0; bottom: 0; 
	right: 3.4em;
  -moz-transition: all 0.2s ease-in 0s; -webkit-transition: all 0.2s ease-in 0s;
  -o-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s; 
  background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
  background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
  background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
  background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
}

.slide-switch input[type="checkbox"]:checked + label .on-off {
  margin-left: 0;
}
.slide-switch input[type="checkbox"]:checked + label .switch {
  right: -2px; 
}

switch.html

<label for="slideswitch">Slide Switch</label>
<div class="slide-switch">
  <input type="checkbox" name="light-switch" id="slideswitch" checked>
  <label class="light-slide-switch" for="slideswitch">
    <div class="on-off"></div>
    <div class="switch"></div>
  </label>
</div>