Simple slide toggle

by Jesse M

HTML

<input type="checkbox" id="slide" />
<label for="slide"></label>

CSS

label {
  background: #D4D4D4;
  height: 40px;
  width: 160px;
  border-radius: 28px;
  display: block;
  transition: all 0.2s ease-in-out;
  position: relative;
  margin: 20px auto;
}

label:before {
  position: absolute;
  background: #0BF;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  left: -10px;
  top: -10px;
  z-index: 100;
  content: '';
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + label {
  background: #000;
}

input[type="checkbox"]:checked + label:before {
  left: calc(100% - 50px);
}