SOURCE

<script>
  function turn(a) {
    a.className = a.className == "switch on" ? "switch off" : "switch on";
  }
</script>
<span id="s1" class="switch off" onclick="turn(this)"></span>
<span id="s2" class="switch off" onclick="turn(this)"></span>
<span id="s3" class="switch off" onclick="turn(this)"></span>
<span id="s4" class="switch off" onclick="turn(this)"></span>

body {
  background: #474747;
  padding:calc(50vh - 90px) calc(50vw - 20px);
}
* {
  --on: #24bfa5;
  --off: #7a7a7a;
}
.switch {
  background: #fff;
  display: block;
  width: 40px;
  height: 20px;
  margin: 20px 0;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}

.switch:before,
.switch:after {
  position: absolute;
  transition: all 0.3s cubic-bezier(0, 0.48, 0.27, 0.98);
}

#s1 {
  margin: 25px 5px;
  width: 30px;
  height: 10px;
  border-radius: 5px;
  background: #1e1e1e;
  box-shadow: #0005 0 0 15px inset;
}

#s1:hover {
  filter: brightness(130%);
}

#s1:active {
  filter: brightness(90%);
}

#s1:before {
  content: "";
  height: 20px;
  width: 20px;
  border-radius: 50%;
  top: -5px;
  box-shadow: #0003 0 5px 15px;
}
#s1.off:before {
  left: -5px;
  background: var(--off);
}
#s1.on:before {
  left: 15px;
  background: var(--on);
}

#s2 {
  border-radius: 10px;
}

#s2.on {
  background: var(--on);
}

#s2.off {
  background: var(--off);
}
#s2:after {
  content: "";
  background: #fff;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
#s2.off:after {
  top: 5px;
  left: 5px;
}
#s2.on:after {
  top: 5px;
  left: 25px;
}

#s2:hover {
  filter: brightness(110%);
}

#s2:active {
  filter: brightness(90%);
}

#s3 {
  border-radius: 10px;
  background: var(--off);
  overflow: hidden;
}

#s3:before {
  content: "";
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background: var(--on);
  top: 0;
  left: 0;
}

#s3.off:before {
  width: 20px;
}

#s3:after {
  content: "";
  background: #fff;
  width: 20px;
  height: 20px;
  top: 0;
  border-radius: 50%;
  box-shadow: #0008 0 0 25px 5px;
}
#s3.off:after {
  left: 0px;
}
#s3.on:after {
  left: 20px;
}

#s3:hover {
  filter: brightness(110%);
}

#s3:active {
  filter: brightness(90%);
}

#s4 {
  border-radius: 10px;
  overflow: hidden;
}

#s4.on {
  background: var(--on);
}

#s4.off {
  background: var(--off);
}

#s4:before,
#s4:after {
  color: #fff;
  line-height: 20px;
  font-size: 13px;
  width: 100%;
  text-align: center;
  text-shadow: #000a 0 0 5px;
}

#s4:before {
  content: "ON";
}

#s4.on:before {
  top: 0;
}

#s4.off:before {
  top: 20px;
}

#s4:after {
  content: "OFF";
}

#s4.off:after {
  top: 0;
}

#s4.on:after {
  top: -20px;
}

#s4:hover {
  filter: brightness(110%);
}

#s4:active {
  filter: brightness(90%);
}