galaxy/Toggle-switches/elijahgummer_tender-horse-32.html

<label class="switch">
  <input type="checkbox" class="input" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by elijahgummer  - Tags: simple, animation, switch, modern, toggle, stretch, squish */
/* Switch container styling */
.switch {
  position: relative;
  display: inline-block;
  width: 3.5em; /* Width of the toggle switch */
  height: 1.5em; /* Height of the toggle switch */
}

/* Hide default checkbox appearance */
.switch .input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider styling */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f0f0f0;
  border-radius: 0.5em; /* Rounded corners for the slider */
  box-shadow: inset 0 0.0625em 0 0 #f4f4f4, 0 0.0625em 0 0 #efefef,
    0 0.125em 0 0 #ececec, 0 0.25em 0 0 #e0e0e0, 0 0.3125em 0 0 #dedede,
    0 0.375em 0 0 #dcdcdc, 0 0.425em 0 0 #cacaca, 0 0.425em 0.5em 0 #cecece;
  transition: 0.23s ease;
}

/* Slider knob styling */
.slider:before {
  content: "";
  position: absolute;
  height: 1.1em;
  width: 1.1em;
  border-radius: 50%;
  background-color: #d3d3d3;
  left: 0.2em;
  bottom: 0.2em;
  transition: 0.23s ease;
}

/* Change slider background color when checked */
.input:checked + .slider {
  translate: 0 0.225em;
  box-shadow: inset 0 0.03em 0 0 #f4f4f4, 0 0.03em 0 0 #efefef,
    0 0.0625em 0 0 #ececec, 0 0.125em 0 0 #e0e0e0, 0 0.125em 0 0 #dedede,
    0 0.2em 0 0 #dcdcdc, 0 0.225em 0 0 #cacaca, 0 0.225em 0.375em 0 #cecece;
  transform: scale(1.2);
}

/* Move the knob when checked */
.input:checked + .slider:before {
  transform: translateX(2em); /* Move knob to the right */
  background-color: #87ceeb;
}

</style>