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: 60px;
	height: 20px;
	border-radius: 10px;
	background-color: #bbb;	
}
.chk + label:before {
	content: '';
	position: absolute;
	top: -5px;
	left: 0;
	z-index: 500;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #F7F4F4;
	box-shadow: 0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3);
	-webkit-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
.chk:checked + label:before {
	content: '';
	position: absolute;
	left: 30px;
	background-color: #4ea5dd;	
}
.chk:checked + label {
	background: #aabbfd;	
}