<label class="toggle">
  <input class="toggle-checkbox" type="checkbox">
  <div class="toggle-switch"></div>
  <span class="toggle-label">Wi-fi</span>
</label>

<hr>

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

$green: #56c080;

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system,".SFNSText-Regular","Helvetica Neue","Roboto","Segoe UI",sans-serif;
}

.toggle {
  cursor: pointer;
  display: inline-block;
}
.toggle-switch {
  display: inline-block;
  background: #ccc;
  border-radius: 16px;
  width: 58px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
  &:before,
  &:after {
    content: "";
  }
  &:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%,#eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
  }
  .toggle:hover &:before {
    background: linear-gradient(to bottom, #fff 0%,#fff 100%);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  }
  .toggle-checkbox:checked + & {
    background: $green;
    &:before {
      left: 30px;
    }
  }
}
.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}
.toggle-label {
  margin-left: 5px;
  position: relative;
  top: 2px;
}