<div class="demoContainer">
  <div class="projHeader">
		<div class="primaryText">Toggle Switch Button</div>
		<div class="createdBy">Created By <a href="http://www.dropinks.com/toggle-button-css/" target="_blank">Dropinks</a>/<a href="https://dribbble.com/shots/13921527-Table-sticky-column-in-pure-CSS3/" target="_blank">Dribbble</a></div>
		<p class="message">For Better usability and interaction use web browsers - chrome, firefox</p>
</div>
			
<div class="">
    <label class="container">
       <input type="checkbox" class="cB" checked />
       <div class="cB-outer-div">
           <div class="cB-inner-div"></div>
       </div>
     </label>
</div>
</div>

.primaryText{
	font-weight: 300;
	font-size: 50px;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}
.secondaryText{
	font-weight: 300;
	font-size: 25px;
}
.createdBy {
    font-weight: 300;
    font-size: 17px;
    margin-top: 10px;
}
.createdBy a{
    color: #333;
    font-weight: 500;
}
.message {
    background: rgba(255, 255, 255, 0.31);
    padding: 10px;
    display: inline-block;
    text-align: center;
    color: #000;
    margin: 25px 0;
    font-size: 13px;
    box-shadow: 2px 2px 0px 1px rgba(0,0,0,0.2);
    border-radius: 4px;
}
.projHeader{
	text-align: center;
}

.footer{position: fixed; bottom: 0; right: auto; top: auto; left: 0; border-top: 1px solid rgba(0,0,0,0.5); width: 100%; transform: translate(0); border: none; padding: 0; text-align: center; border-top: 1px solid #bfc7e4;}
.footer div{display: inline-block;}
.footer a.social{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; margin: 0px 20px;}

body{background: #333; font-family: poppins;}
.projHeader, .createdBy a, .message{color: #fff;}
.message{background: rgba(255, 255, 255, 0.1);}



.demoContainer{
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); 
} 
.cB{
  display: none;
}
.container{
  cursor: pointer;
  transform: scale(1);
  margin: 20px auto 50px auto;
  display: block;
  width: 80px;
}
.cB-outer-div{
  display: inline-block; 
  position: relative;
  width: 80px; 
  height: 30px; 
  background: #ff6454;
  border-radius: 20px;
}
.cB-inner-div{
  display: inline-block; 
  position: absolute;
  width: 50px; 
  height: 50px; 
  background: #c0392b;
  border-radius: 50%;
  top: -10px;
  box-shadow: 2px 0px 4px 0px rgba(0,0,0,0.25);
}

/***Adding tranisitons***/
.cB-inner-div{
  transform: translateX(0px);
}
.cB-outer-div, .cB-inner-div{
  transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
}
input[type="checkbox"].cB:checked + .cB-outer-div{
  background: #2ecc71;
}
input[type="checkbox"].cB:checked + .cB-outer-div .cB-inner-div{
  background: #27ae60;
  transform: translateX(30px);
  box-shadow: -2px 0px 4px 0px rgba(0,0,0,0.2);
}