A Pen by Sandesh Damkondwar.

index.html

<div class=round><input type=checkbox id=onoff name=onoff />
<div class=back><label class=but for=onoff><span class=on>I</span><span class=off>0</span></label></div></div>

style.css

/**
* Round switch button in css with animation cleaned up,
as seen on:
http://psd.tutsplus.com/tutorials/interface-tutorials/round-switch-button/

Use box-shadow for inner-div's sharp-bottom-highight and border-gradient on top
*/
input{display:none}

body {
	background-color: #555;
	background-size: 20px 20px;
	color:white;
	font-family:sans-serif;
	font-size:27px;
}

.on,.off {
	position:absolute;
	text-align:center;
	-webkit-text-shadow:inset 1px 1px 1px black;
	width:100%;
}

.on {
	color:#bbb;
	top:10px;
	-webkit-transition:all 0.1s;
	font-family:sans-serif
}

.off {
	bottom:5px;
  -webkit-transition:all 0.1s;
	transform:scaleY(0.85);
}

.but {
	background-color:#272727;
	border-radius:400px 400px 400px 400px / 400px 400px 300px 300px;
	border-bottom-width:0px;
	box-shadow: inset 8px 0px 0px -7px #000 ,
		inset -8px 0px 5px -10px #000 ,
		inset 0px 2px 5px -2px rgba(200, 200, 200, 0.5) ,
		0 3px 3px 0px #000 ,
		inset 0 -230px 60px -200px rgba(255, 255, 255, 0.2) ,
		inset 0 220px 40px -200px rgba(0, 0, 0, 0.3);
	display:block;
	font-size:27px;
	height:178px;
	position:relative;
	-webkit-transition:all 0.2s;
	width:204px;
}

.back {
	background-color:black;
	background-image:
		-webkit-linear-gradient(0deg, transparent 30%, transparent 70%)
		,-webkit-linear-gradient(0deg, rgba(150,150,150,0) 30%, rgba(150,150,150,.1) 50%, rgba(150,150,150,0) 70%);
	border-radius:105px;
	box-shadow:
		30px 30px 30px -20px rgba(0,0,0,.3)
		,-30px 30px 30px -20px rgba(0,0,0,.3)
		,0 30px 30px 0px rgba(0,0,0,.3)
		,inset 0 -1px 0 0 #333;
	box-sizing:border-box;
	height:210px;
	padding:2px 3px;
	-webkit-transition:all 0.2s;
	width:210px;
}

.round {
	background: #000;
	background: -webkit-linear-gradient(270deg, #444 , #222);
	-webkit-box-sizing: border-box;
	box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0) ,
		0px 0px 3px 1px #000 ,
		inset 0 8px 3px -8px rgba(255, 255, 255, 0.4);
	height: 260px;
	margin: 30px auto;
	padding: 25px;
	width: 260px;
}


input:checked + .back .on,input:checked + .back .off {
	text-shadow:inset 1px 1px 1px black;
}

input:checked + .back .on {
	color:#999;
	top:10px;
	-webkit-transform:scaleY(0.85);
}

input:checked + .back .off {
	color:#bbb;
	bottom:5px;
	-webkit-transform:scaleY(1);
}

input:checked + .back .but {
	background:#232323;
	background-image:-webkit-radial-gradient(50% 15%,circle closest-corner,rgba(0,0,0,.3) ,rgba(0,0,0,0));
	border-radius:400px 400px 400px 400px / 300px 300px 400px 400px;
	box-shadow: inset 3px 0px 0px -6px #000 ,
		inset 3px 0px 0px -6px #000 ,
		0 -3px 3px -5px rgba(250, 250, 250, 0.4) ,
		inset 0 3px 1px -2px #0A0A0A ,
		inset 0 280px 40px -200px rgba(0, 0, 0, 0.2) ,
		inset 0 -200px 40px -200px rgba(180, 180, 180, 0.2);
	margin-top:27px;
}

input:checked + .back {
	background-image:
		-webkit-linear-gradient(90deg, black 30%, transparent 70%),
		-webkit-linear-gradient(180deg, rgba(250,250,250,0) 0%,
		rgba(250,250,250,.4) 50%, rgba(150,150,150,0) 100%);
	box-shadow: 30px 30px 30px -20px rgba(0,0,0,.1),
		-30px 30px 30px -20px rgba(0,0,0,.1),
		0 30px 30px 0px rgba(0,0,0,.2),
		inset 0 1px 2px 0 rgba(0,0,0,.6);
	padding:2px 3px;
}

.l,.r {
	margin:0 auto;
	text-align:center;
}

.round,#onoff,.back,.but,.on,.off {
	-webkit-user-select: none;
	user-select: none;
}

Toggle-switch-with-checkbox:checked.markdown

Toggle switch with checkbox:checked

Round switch button in css with animation cleaned up. Inspired on the design of Paul Flavius, see:

http://psd.tutsplus.com/tutorials/interface-tutorials/round-switch-button/

It is pure CSS, and animated so don't forget to click this very special checkbox. And in case you wonder: yes, this checkbox can be used in forms just as if it was a normal checkbox!

PS: can anyone confirm the animation with :checked state in safari?

A Pen by Sandesh Damkondwar on CodePen.

License.