A CodePen by Abhishek Hingnikar. Boredom.css - Well i was getting bored so i am creating a bunch of realistic controls set

index.html

<center class="centerizer">
  <p>Switch Awesomness on!</p>
  <span>
   <input id="toggle" type="checkbox" />
   <label for="toggle" >
     <div class="On">On</div>
     <div class="Off">Off</div>
   </label>
  </span>
  
  <span>
   <input id="toggle2" CHECKED type="checkbox" />
   <label for="toggle2" >
     <div class="On">On</div>
     <div class="Off">Off</div>
   </label>
  </span>
  <span>
    <input type="range" />
  </span>
</center>

style.css

body{
  position:relative;
  width:100%;
  height:100%;  
  background:#dedede;
}
span input[type=range]{
  appearance:none;
  border-radius:4px;
  height:24px;
  border:1px solid #000;
  background:#111;
}
span input[type=range]::-webkit-slider-thumb{
  appearance:none;
  background:#fff;
  height:24px;
  width:24px;
  border-radius:4px;
}
span input[type=checkbox]{
  position:relative; 
  -webkit-appearance:none;
  height:0px;
  width:0px;
  position:absolute;
}
span input[type=checkbox] + label{
  position:relative;
  width:100px;
  height:40px;
  display:block;
  border:1px solid #000;
  margin:10px;
  background:#111;
  border-radius:4px;
  box-shadow:0 0 3px rgba(255,0,0,1);  
}

span input[type=checkbox] + label div{
 float:left;
 margin-top:1px;
 width:49px;
 padding-top:10px;
 height:28px;
 background:#fefefe;
 border-radius:3px;
 font-weight:700;
 text-shadow:-1px 0px 0px #ccc;
 text-align:center;
 transition:all 200ms;
}

span input[type=checkbox] + label div.On{
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
  transform:rotateY(30deg);
  -webkit-transform-origin-x:49px;
  -moz-transform-origin-x:49px;
  -o-transform-origin-x:49px;
  -ms-transform-origin-x:49px;
  transform-origin-x:49px;
  box-shadow:-4px 0px 0px #aaa;
}

span input[type=checkbox] + label::before{
 width:40px;
 height:20px;
 position:absolute;
 top:50%;
 left:4px;
 transform:rotate(-6deg);
 content:' ';
 background:rgba(0,0,0,0.6);
 box-shadow:0px 0px 6px 2px rgba(0,0,0,0.6);
}

span input[type=checkbox] + label div.Off{
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;
  background:#dedede;
  position:relative;
  -webkit-transform-origin-x:0px;
  -moz-transform-origin-x:0px;
  -o-transform-origin-x:0px;
  -ms-transform-origin-x:0px;
  transform-origin-x:0px;

}

span input[type=checkbox]:checked + label{
  box-shadow:0 0 3px rgba(0,255,0,1);
}

span input[type=checkbox]:checked + label::before{
 left:58%;
 transform:rotate(6deg);
}

span input[type=checkbox]:checked + label div.On{
  box-shadow:none;
  margin-left:2px;
  transform:rotateY(0deg);
  background:#dedede;
}

span input[type=checkbox]:checked + label div.Off{
  box-shadow:4px 0px 0px #aaa;         transform:rotateY(30deg);
  background:#fff;
}

.centerizer{
  position:relative;
  top:50%;
  margin-top:-20px;
}