.toggle {
  display: inline-block;
  height: 20px;
  position: relative;
  width: 60px;
  border: 1px solid #ccc; 
}
.toggle input[type="checkbox"] {
  display: none;
}
.toggle .slider {
  background-color: #ccc;
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: .4s;
  position: relative;
  border-radius: 50px;
}
.toggle .slider:before {
  background-color: #fff;
  bottom: 2px;
  content: "";
  height: 16px;
  left: 2px;
  position: absolute;
  transition: .4s;
  width: 16px;
  border-radius: 50px;
}
.toggle input[type="checkbox"]:checked + .slider {
 background-color: #07a787;
}
.toggle input[type="checkbox"]:checked + .slider:before {
 transform: translateX(26px);
}