Переключатели

checkbox.css

body {
  background: #eee;
}
.lbl {
  position: relative;
  display: block;
  height: 20px;
  width: 44px;
  background: #898989;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.lbl:after {
  position: absolute;
  left: -2px;
  top: -3px;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
  content: '';
  transition: all 0.3s ease;
}
.lbl:before {
  position: absolute;
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 100px;
  background: rgba(137,137,137,0.2);
  margin: -25px 0 0 -25px;
  content: '';
  transform: scale(0);
}
.lbl:active:before {
  transform: scale(1);
}
.cbx:checked ~ label {
  background: #6fbeb5;
}
.cbx:checked ~ label:after {
  left: 20px;
  background: #179588;
}
.cbx:checked ~ label:before {
  background: rgba(23,149,136,0.2);
  left: 20px;
}
.cbx:disabled ~ label {
  background: #d5d5d5;
  pointer-events: none;
}
.cbx:disabled ~ label:after {
  background: #bcbdbc;
}
.cntr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.press {
  margin-bottom: 40px;
}
.hidden {
  display: none;
}

checkbox.html

<div class="cntr">
  <div class="row press">
    <input type="checkbox" id="unchecked" class="cbx hidden"/>
    <label for="unchecked" class="lbl"></label>    
  </div>
  <div class="row press">
    <input type="checkbox" id="checked" class="cbx hidden" checked/>
    <label for="checked" class="lbl"></label>
  </div>
   <div class="row">
    <input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
    <label for="unchecked_disabled" class="lbl"></label>
  </div>
</div>