vNgzvz

index.html

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

style.css

label {
  display: block;
  width:42px;
  height:24px;
  background:#efefef;
  border-radius:15px;
  position:relative;
  box-shadow:inset 0 0 3px rgba(0,0,0,0.2);
}

label:before {
  content:"";
  position:absolute;
  top:3px;
  height:18px;
  width:18px;
  left:3px;
  background:#CC3F3F;
  border-radius:9px;
  transition:left 0.3s, background 0.3s;
}

label:hover {
  cursor:pointer;
}

input {
  visibility:hidden;
  position:absolute;
}

input:checked + label:before {
  left:21px;
  background:#62CC3F;
}

vNgzvz.markdown

CSS Toggle Switch

A Pen by Brett on CodePen.

License.