Despicable Checkboxes

by Trae

HTML

<input type="checkbox" name="switch" id="switch"/>
<label for="switch" class="switch">
  <span></span>
</label>

<input type="checkbox" name="switch" id="switch1"/>
<label for="switch1" class="switch switch1">
  <span></span>
</label>

CSS

body {
  background : #eee;
  padding-top : 20px;
}

#switch , #switch1 {
  display : none;
}

.switch {
  display : block;
  position: relative;
  width   : 120px;
  padding : 3px;
  margin  : 20px auto;
  cursor  : pointer;
  border-radius : 33px;
  background    : #ffcc00;
  box-shadow    :  0 1px 1px 0 rgba(0,0,0,.3);
}

.switch:before , .switch:after {
  display : block;
  color   : #fff;
  position : absolute;
  font-size : 30px;
  top : 15px;
  z-index : 0;
}

.switch:before {
  left : 15px;
  content : '✔';
}

.switch:after {
  right : 15px;
  content : '✖';
}

span {
  display : block;
  width   : 39px;
  height  : 41px;
  border  : 7px solid #848484;
  border-radius : 50%;
  position      : relative;
  left          : 0;
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
}

.switch span {
  left : 68px;
}

.switch1 span {
  left : 0px;
}

span:after , span:before { 
  display : block;
  content : ' ';
  position: absolute;
  z-index : 999;
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;		
}

span:before {
  width  : 100%;
  height : 34px;
  top  : 0; 
  left : 0;
  background-color: #fff;
  border-radius : inherit;
  border-top    : 4px solid #ffcc00;
  border-bottom : 3px solid #ffcc00;
}

.switch1 span:before {
  border-top-width : 20px;
  height : 19px;
}

span:after {
  width  : 3px;
  height : 3px;		  
  top : 0;
  left : 0;
  bottom : 0;
  right : 0;
  margin : auto;
  background-color: #000;
  box-shadow : -2px -2px 0 0px #fff , 0 0 1px 3px #4e341c ;
  border-radius : 50%;
}

.switch1 span:after {		
  top : 10px;
  left : -20px;
}

#switch:checked + .switch span {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) left;
  left  : 0px;
}

#switch:checked + .switch span:before {
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  border-top-width : 20px;
  height : 19px;
}

#switch:checked + .switch span:after{
  transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  top : 10px;
 ...