Power Lever Switch

<label class="tgl-power-lever-switch">
  <input type="checkbox" role="switch" aria-label="Main power">
  <span class="tgl-power-lever-switch-rig" aria-hidden="true">
    <span class="tgl-power-lever-switch-lamp"></span>
    <span class="tgl-power-lever-switch-blade"></span>
    <span class="tgl-power-lever-switch-clip"></span>
    <span class="tgl-power-lever-switch-spark"></span>
  </span>
</label>

.tgl-power-lever-switch {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-power-lever-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-power-lever-switch-rig {
  position: relative;
  display: block;
  width: 7.6em;
  height: 5em;
}
/* base block and the hinge post */
.tgl-power-lever-switch-rig::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0.3em;
  bottom: 0.2em;
  height: 1.3em;
  border-radius: 0.4em;
  background: linear-gradient(#475569, #1e293b);
  box-shadow: 0 0.2em 0.35em rgba(0, 0, 0, 0.3), inset 0 0.08em 0 rgba(255, 255, 255, 0.18);
}
.tgl-power-lever-switch-rig::after {
  content: "";
  position: absolute;
  left: 0.7em;
  bottom: 1.5em;
  z-index: 1;
  width: 0.55em;
  height: 1.1em;
  border-radius: 0.12em 0.12em 0 0;
  background: linear-gradient(90deg, #92400e, #f59e0b, #92400e);
}
.tgl-power-lever-switch-clip {
  position: absolute;
  left: 5.05em;
  bottom: 1.5em;
  z-index: 3;
  width: 0.7em;
  height: 1.1em;
  border-radius: 0.12em 0.12em 0 0;
  background: linear-gradient(90deg, #92400e, #fbbf24 28%, #451a03 40% 60%, #fbbf24 72%, #92400e);
}
.tgl-power-lever-switch-blade {
  position: absolute;
  left: 0.82em;
  bottom: 2.18em;
  z-index: 2;
  width: 4.9em;
  height: 0.34em;
  border-radius: 0.17em;
  background: linear-gradient(#fcd34d, #d97706 55%, #92400e);
  transform-origin: 0.15em 50%;
  transform: rotate(-20deg);
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.tgl-power-lever-switch-blade::before {
  content: "";
  position: absolute;
  left: -0.05em;
  top: -0.05em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: #fde68a;
  box-shadow: inset 0 0 0 0.08em #b45309;
}
/* the handle takes the accent color */
.tgl-power-lever-switch-blade::after {
  content: "";
  position: absolute;
  left: 100%;
  top: calc(50% - 0.31em);
  width: 1.1em;
  height: 0.62em;
  border-radius: 0.31em;
  background: linear-gradient(color-mix(in srgb, var(--c) 70%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 60%, #000));
  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.3);
}
.tgl-power-lever-switch-lamp {
  position: absolute;
  left: 2.7em;
  bottom: 0.55em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #52525b;
  box-shadow: inset 0 0.06em 0.1em rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.tgl-power-lever-switch-spark {
  position: absolute;
  left: 4.6em;
  bottom: 1.55em;
  z-index: 4;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: repeating-conic-gradient(from -6deg, #fde047 0 12deg, transparent 0 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0.2em, #000 0.22em 0.75em, transparent 0.77em);
  mask: radial-gradient(circle, transparent 0.2em, #000 0.22em 0.75em, transparent 0.77em);
  filter: drop-shadow(0 0 0.15em #f59e0b);
  opacity: 0;
}
.tgl-power-lever-switch input:checked + .tgl-power-lever-switch-rig .tgl-power-lever-switch-blade {
  transform: rotate(0deg);
  transition: none;
  animation: tgl-power-lever-switch-close 0.55s both;
}
.tgl-power-lever-switch input:checked + .tgl-power-lever-switch-rig .tgl-power-lever-switch-spark {
  animation: tgl-power-lever-switch-spark 0.45s ease-out 0.28s both;
}
.tgl-power-lever-switch input:checked + .tgl-power-lever-switch-rig .tgl-power-lever-switch-lamp {
  background: var(--c);
  box-shadow: 0 0 0.5em 0.1em var(--c);
  transition-delay: 0.3s;
}
@keyframes tgl-power-lever-switch-close {
  0% { transform: rotate(-20deg); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  55% { transform: rotate(1deg); animation-timing-function: ease-out; }
  72% { transform: rotate(-3deg); animation-timing-function: ease-in-out; }
  88% { transform: rotate(0.5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes tgl-power-lever-switch-spark {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) rotate(25deg); }
}
.tgl-power-lever-switch input:focus-visible + .tgl-power-lever-switch-rig {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
  border-radius: 0.4em;
}

@media (prefers-reduced-motion: reduce) {
  .tgl-power-lever-switch, .tgl-power-lever-switch *, .tgl-power-lever-switch::before, .tgl-power-lever-switch::after, .tgl-power-lever-switch *::before, .tgl-power-lever-switch *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar toggle switches