<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 checkbox, usable in any form!</p>

/**
* Round switch button in css with animation cleaned up,
as seen on:
https://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}