Switch

<div class="colorful-switch">
  <input type="checkbox" class="colorful-switch__checkbox" id="colorful-switch-cb" />
  <label class="colorful-switch__label" for="colorful-switch-cb">
    <span class="colorful-switch__bg"></span>
    <span class="colorful-switch__dot"></span>
    <span class="colorful-switch__on">
      <span class="colorful-switch__on__inner"></span>
    </span>
    <span class="colorful-switch__off"></span>
  </label>
</div>

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

body {
  background: #24282C;
}

.colorful-switch {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 120px;
  margin-left: -140px;
  margin-top: -60px;
  border-radius: 50px;
  background: #cfcfcf;
}
.colorful-switch:before {
  content: "";
  z-index: -1;
  position: absolute;
  left: -5px;
  top: -5px;
  width: 290px;
  height: 130px;
  border-radius: 55px;
  background: #314239;
  transition: background-color 0.3s;
}
.colorful-switch:hover:before {
  background: #4C735F;
}
.colorful-switch__checkbox {
  z-index: -10;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.colorful-switch__label {
  z-index: 1;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  cursor: pointer;
}
.colorful-switch__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 840px;
  height: 100%;
  background: linear-gradient(90deg, #14DCD6 0, #10E7BD 280px, #EF9C29 560px, #E76339 100%);
  transition: transform 0.5s;
  transform: translate3d(-560px, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg {
  transform: translate3d(0, 0, 0);
}
.colorful-switch__dot {
  position: absolute;
  left: 204px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.5s;
  transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot {
  transform: translate3d(-125px, 0, 0);
}
.colorful-switch__on {
  position: absolute;
  left: 177px;
  top: 35px;
  width: 30px;
  height: 56px;
  transition: transform 0.5s;
  transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on {
  transform: translate3d(-125px, 0, 0);
}
.colorful-switch__on__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  transform-origin: 100% 50%;
  transform: rotate(45deg) scale(0) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner {
  transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transform: rotate(45deg) scale(1) translateZ(0);
}
.colorful-switch__on__inner:before, .colorful-switch__on__inner:after {
  content: "";
  position: absolute;
  border-radius: 4px;
  background: #fff;
}
.colorful-switch__on__inner:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 9px;
}
.colorful-switch__on__inner:after {
  right: 0;
  top: 0;
  width: 9px;
  height: 100%;
}
.colorful-switch__off {
  position: absolute;
  left: 204px;
  top: 50%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  transition: transform 0.5s;
  transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off {
  transform: translate3d(-125px, 0, 0);
}
.colorful-switch__off:before, .colorful-switch__off:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 8px;
  margin-top: -4px;
  border-radius: 4px;
  background: #fff;
  transition: transform 0.25s 0.25s;
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
  transition-delay: 0s;
}
.colorful-switch__off:before {
  transform: rotate(45deg) scaleX(1) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before {
  transform: rotate(45deg) scaleX(0) translateZ(0);
}
.colorful-switch__off:after {
  transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transform: rotate(-45deg) scaleX(1) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
  transition-timing-function: ease;
  transform: rotate(-45deg) scaleX(0) translateZ(0);
}