A CodePen by Jacob Lowe.

index.html

<label>
  <input type="checkbox" class="switch"/>
  <div class="switch"></div>
</label>
  

style.css

/**
 * Switch-style checkboxes.
 * Inspired by Espresso’s “Tools” switch
 */

input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
	position: absolute;
	opacity: 0;
}

label {
	position: relative;
	display: inline-block;
	margin: 0 1em 1em 0;
	font: 200% sans-serif;
	text-shadow: 0 1px 1px white;
}

input[type="checkbox"].switch + div {
	width: 1em;	height: 1.8em;
	border: 1px solid rgba(100,100,100,.3);
	border-radius: 999px;
	margin: 0 auto .8em;
	background: rgb(230,230,230);
	background-origin: border-box;
	background-clip: border-box;
	box-shadow: 
		0 1px 1px hsla(0,0%,100%,.8),
		inset 0px 5px 10px rgba(0,0,0,.2);
	overflow: hidden;
  padding-top: .8em;
  height: 1em;
	-webkit-transition-duration: .4s;
	-webkit-transition-property: padding, height, background;
}

input[type="checkbox"].switch:checked + div {
	padding-top: 0em;
	height: 1.8em;
	background: #b9d766;
}
input[type="checkbox"].switch + div:before {
	content: '';
	display: block;
	width: 1em; height: 1em;
	margin: -1px;
	border:  1px solid rgba(235,235,235,.7);
	border-radius: inherit;
	background: rgb(245,245,245);
	box-shadow: 0 0 .5em rgba(0,0,0,.5);
}

input[type="checkbox"].switch:active + div:before {
	background-color: background: rgb(0,0,0);

}

input[type="checkbox"].switch:focus + div {
	box-shadow: 0 0 .3em 1px red,
	            0 1px 1px hsla(0,0%,100%,.8);
}

body {
	padding: 1em;
	background: white;
}