iOS switch

index.html

<div class="mod-switch-wrap">
  <input type="checkbox" class="mod-switch" id="checkbox-1">
  <label for="checkbox-1"></label>
</div>

style.scss

.mod-switch-wrap {
  display: inline-block;
}
input[type="checkbox"].mod-switch {
  position: absolute;
  visibility: hidden;
  clip: rect(0,0,0,0);
  margin: 0;
}
input[type="checkbox"].mod-switch + label {
  position: relative;
  padding: 0 0 0 41px;
  cursor: pointer;
}
input[type="checkbox"].mod-switch + label:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 41px; /* x*5 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: #fff;
    border: 1px solid #d9d9d9;
    transition: all 0.3s;
}
// white button
input[type="checkbox"].mod-switch + label:after {
    content: "";
    position: absolute;
    left: 1px;
    top: 2px;
    width: 20px; /* x*3 */
    height: 20px; /* x*3 */
    border-radius: 50%; /* x*2 */
    background: #fff;
    border: 1px solid #d9d9d9;
    transition: all 0.3s;
}
input[type="checkbox"].mod-switch + label:hover:after {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
// white button movement
input[type="checkbox"].mod-switch:checked + label:after {
    margin-left: 18px;
}
input[type="checkbox"].mod-switch:checked + label:before {
    background: #1cbcb4;
}