Material Design Inspired Animated Toggle With Pure CSS

A CSS only solution to create Material Design inspired beautiful, animated toggle switches from checkboxes.

How to use it:

Wrap your checkbox into a label element.

<label class="input-toggle">
  <input type="checkbox" checked>
  <span></span>
</label>

The core CSS/CSS3 rules to convert the checkbox into a toggle switch.

label.input-toggle {
  line-height: 0;
  font-size: 0;
  display: inline-block;
  margin: 0;
}
label.input-toggle > span {
  display: inline-block;
  position: relative;
  background-image: -webkit-linear-gradient(left, #848484 0%, #848484 50%, #7cbcbf 50%, #7cbcbf 100%);
  background-image: linear-gradient(to right, #848484 0%, #848484 50%, #7cbcbf 50%, #7cbcbf 100%);
  background-size: 64px 14px;
  background-position: 0%;
  border-radius: 32px;
  width: 32px;
  height: 14px;
  cursor: pointer;
  -webkit-transition: background-position 0.2s ease-in;
  transition: background-position 0.2s ease-in;
}
label.input-toggle > input:checked + span { background-position: -100%; }
label.input-toggle > span:after {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  background: #F1F1F1;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-transition: left 0.2s ease-in, background-color 0.2s ease-in, -webkit-transform 0.3s ease;
  transition: left 0.2s ease-in, background-color 0.2s ease-in, -webkit-transform 0.3s ease;
  transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease;
  transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease, -webkit-transform 0.3s ease;
}
label.input-toggle > input:checked + span:after {
  left: calc(100% - 18px);
  background-color: #1D8B90;
}
label.input-toggle > span:active:after {
  -webkit-transform: translateY(-50%) scale3d(1.15, 0.85, 1);
  transform: translateY(-50%) scale3d(1.15, 0.85, 1);
}
label.input-toggle > input:disabled + span:active:after {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
label.input-toggle > input:disabled + span { cursor: default; }
label.input-toggle > input:disabled + span { background: #D5D5D5; }
label.input-toggle > input:disabled + span:after { background: #BDBDBD; }
label.input-toggle > input {
  display: block;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}