<input type="checkbox" class="check" id="chkbx" name="check_one" checked/>
<label for="chkbx">
  <div id="thumb">
    <div></div>
  </div>
   <span class="day">
  </span>
  <span class="night">
    <span></span>
  </span>
</label>
  <p>A functional interpretation of this <a href="https://cdpn.io/tvegI">pen</a>
    <br><span class="small">thanks <a href="http://josh-ruther4d.com">Josh Rutherford</a></span></p>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
body { 
  background:#ddece9; 
  font-family: 'Open Sans', sans-serif;
  text-align:center;
  color:#777;
}
p{
  font-size:0.9em;
  margin-top:25px;
}
.small { font-size:0.8em;}
a { color:#3e6185; text-decoration:none;}
a:hover {text-decoration:underline}
.bk { background: #fcf6e3; }
input[type=checkbox] { display: none; }
label {
  display: block;
  position: absolute;
  left: 50%;
  margin-left:-50px;
  top: 85px;
  width: 100px;
  height: 50px;
  z-index: -1;
  border-radius: 5px;
}

#chkbx:checked ~ label[for=chkbx]:before {
  content:"";
}
#thumb {
  content: '';
  width: 52px;
  height: 52px;
  display: block;
  float: left;
  border-radius: 5px;
  padding: 0px;
  margin: 0px 0px 0px 50px;
  background: #fafafa;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  box-shadow:0 5px 10px -3px rgba(0,0,0,0.3);
  transition:background 0.5s;
}

#thumb:hover {
    background: #f3f3f3;
}
#thumb div {
  width: 70%;
  height: 5px;
  background: rgba(0,0,0,0.1);
  margin: 23px auto;
  position:relative;
}

#thumb div:after {
  content:"";
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.1);
  position:absolute;
  top: 10px;
  left:0;
}

#thumb div:before {
  content:"";
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.1);
  position:absolute;
  top: -10px;
  left:0;
}


#chkbx:checked ~ label[for=chkbx] #thumb {
margin: 0;
}
label:before,#thumb,#chkbx:checked ~ label[for=chkbx]:before {
transition: all .2s;
}

.night{
  width:50px;
  height:45px;
  display:block;
  position:absolute;
  background:#3e6185;
  border-radius: 0 5px 5px 0;

  margin-left:50%;
  border-top:5px solid #194d60;
  border-right:1px solid rgba(255,255,255,1);
  border-bottom:1px solid rgba(255,255,255,1);
}

.night:before{
  content:" ";
  width:20px;
  height:20px;
  border-radius:10px;
  position:absolute;
  background:#ffffff;
  top:-15px;
  margin-top:50%;
  left:-10px;
  margin-left:50%;
}

.night:after{
  content:" ";
  width:15px;
  height:15px;
  border-radius:7.5px;
  background:#3e6185;
  position:absolute;
  top:-15px;
  margin-top:50%;
  left:-12px;
  margin-left:50%;
}

.night span{
  display:block;
  width:5px;
  height:5px;
  background:#9fb0c2;
  border-radius:2.5px;
  position:absolute;
  z-index:2;
  right:7px;
  top:4.5px;
}

.night span:before, .night span:after{
  content:" ";
  width:3px;
  height:3px;
  border-radius:1.5px;
  position:absolute;
  background:#9fb0c2;
  z-index:2;
  left:-26px;
  top:4px;
}

.night span:after{
  left:-2px;
  top:28px;
}

.day{
  width:50px;
  height:45px;
  display:block;
  position:absolute;
  background:#85d6f4;
  border-radius:5px 0 0 5px;

  overflow:hidden;
  border-top:5px solid #56c1eb;
  border-left:1px solid rgba(255,255,255,0.8);
  border-bottom:1px solid rgba(255,255,255,0.8);
}

.day:before{
  content:" ";
  width:18px;
  height:18px;
  border-radius:50%;
  position:absolute;
  background:#f0ed0a;
  top:-18px;
  margin-top:50%;
  left:-15px;
  margin-left:50%;
  border: 2px solid rgba(255,255,255,0.4)
}

.day:after{
  content:" ";
  width:70px;
  height:70px;
  border-radius:50px;
  position:absolute;
  background:green;
  top:10px;
  margin-top:50%;
  left:-20px;
  margin-left:50%;
}

$("#chkbx").click(function(){
  if($("input:checked")){
    $('body').toggleClass('bk')
  } 
})