Toggle Switch

Toggle switch using CSS

<style>
/* 
For accessability, makes checkbox 
selectable by tabbing/screenreaders 
*/
label.toggle input[type=checkbox] {
	opacity: 0;
	height: 1px;
	margin: 0;
	padding: 0;

	display: block;
}

/* Outline label when checkbox is selected */
label.toggle input[type=checkbox]:focus ~ span.slider {
	outline: black dotted 1px;
}

label.toggle span.slider {
	/* So that we can position the toggle dot */
	position: relative;

	display: block;
	width: 1.5em;
	height: 0.75em;
	padding: 0.25em;

	/* Behave like input */
	cursor: pointer;

	/* Make it rounded */
	border-radius: 0.75em;

	background-color: grey;

	transition: background-color 0.5s ease-in-out;
}

/* Slider Knob */
label.toggle span.slider:before {
	content: '';

	margin: 0;
	display: block;
	height: 0.75em;
	width: 0.75em;
	border-radius: 0.5em;

	background: white;

	transition: margin 0.5s ease-in-out;
}

/* When the box is checked change the appearance */
label.toggle input[type=checkbox]:checked ~ span.slider {
	background-color: #428bff;
}
label.toggle input[type=checkbox]:checked ~ span.slider:before {
	margin-left: 0.75em;
}
</style>
<!-- Label will be used as the content -->
<label class="toggle">
	<input tabindex="0" name="checkbox" type="checkbox">
	<span class="slider"></span>
</label>