SOURCE

<div class="wrapper">
	<input type="checkbox" name="chk" class="chk" id="chk1">
	<label for="chk1"></label>
	<span style="margin-right: 50px;"></span>
	<input type="checkbox" name="chk" class="chk" id="chk2" checked>
	<label for="chk2"></label>		
</div>

.wrapper {
	width: 500px;
	height: 400px;
	margin: 100px auto;
	text-align: center;
}
.chk {
	display: none;
}
.chk + label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	width: 65px;
	height: 30px;
	border-radius: 10px;
	background-color: #F7836D;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(146, 196, 245, 0.4);	
}
.chk + label:before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	z-index: 500;
	width: 20px;
	height: 32px;
	border-radius: 7px;
	background: #fff;
	box-shadow: 0 0 1px rgba(0,0,0,0.6);
}
.chk + label:after {
	content: 'OFF';
	position: absolute;
	top: 0;
	left: 30px;
	width: 50%;
	text-align: left;
	font-size: 12px;
	line-height: 30px;
	color: #fff;
}
.chk:checked + label {
	background-color: #4cda60;
}
.chk:checked + label:before {
	content: '';
	position: absolute;
	left: 45px;	
}
.chk:checked + label:after {
	content: 'ON';
	left: 0;
	text-align: right;		
}
.chk + label:before,.chk + label:after,.chk + label {
	-webkit-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;		
}