A CodePen by Jeroen Franse. 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 CS

index.html

<p class=l>Don't forget to click the switch to see the action</p>
<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>
<p class=r>It is just an ordinary ckeckbox, usable in any form!</p>

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 6px 5px -7px rgba(0,0,0,1)
		,inset -8px 6px 5px -7px rgba(0,0,0,1)
		,inset 0 -3px 2px -2px rgba(200,200,200,.5)
		,0 3px 3px -2px rgba(0,0,0,1)
		,inset 0 -230px 60px -200px rgba(255,255,255,.2)
		,inset 0 220px 40px -200px rgba(0,0,0,.3);
	display:block;
	font-size:27px;
	height:178px;
	position:relative;
	-webkit-transition:all 0.2s;
	width:200px;
}
.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:4px 4px;
	-webkit-transition:all 0.2s;
	width:210px;
}


.round{
	background:black;
	background:-webkit-linear-gradient(270deg, #444 ,  #222);
	border-radius:130px;
	-webkit-box-sizing:border-box;
	box-shadow:
		0px 0px 0px 8px rgba(0,0,0,.1)
		,0px 0px 3px 1px rgba(0,0,0,1)
		,inset 0 8px  3px -8px rgba(255,255,255,.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 8px -4px 5px -7px rgba(0,0,0,1)
		,inset -8px -4px 5px -7px rgba(0,0,0,1)
		, 0 -3px 8px -4px rgba(250,250,250,.4)
		,inset 0 3px 4px -2px rgba(10,10,10,1)
		,inset 0 280px 40px -200px rgba(0,0,0,.2)
		,inset 0 -200px 40px -200px rgba(180,180,180,.2);
	margin-top:20px;
}
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 4px;
}
.l,.r{margin:0 auto;text-align:center}
.round,#onoff,.back,.but,.on,.off{user-select: none}