.wrap {
	width:42px;
	height:20px;
}
input {
	display:none;
}
label {
	display:block;
	border:1px solid #888;
	height:20px;
	border-radius:15px;
	transition:.3s;
}
label .move {
	display:block;
	width:20px;
	height:20px;
	border-radius:50%;
	box-shadow:1px 1px 1px #ccc;
	background:#fff;
	transition:.3s;
	overflow:hidden;
}
input:checked+label {
	background:red;
}
input:checked+label .move {
	transform:translateX(20px);
	box-shadow:none;
}
.move span {
	width:40px;
	display:block;
	height:20px;
	line-height:20px;
	transition:0.3s;
}
input:checked+label .move span {
	transform:translateX(-20px);
}
em {
	text-align:center;
	width:50%;
	font-size:12px;
	font-style:normal;
	float:left;
}