galaxy/Toggle-switches/vikramsinghnegi_evil-lion-15.html

<div>
  <div class="switch">
    <input type="checkbox" id="switch1" class="switch-check" />
    <label for="switch1" class="switch-label">
      Check
      <span></span>
    </label>
  </div>
</div>

<style>
/* From Uiverse.io by vikramsinghnegi  - Tags: simple, neumorphism, glassmorphism */
.switch {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50px;
  border: 4px solid rgba(209, 92, 92, 0.1);
  box-shadow: 8 0 6px rgba(44, 26, 26, 0.5) inset;
  height: 42px;
  margin: 8px;
  position: relative;
  width: 115px;
  display: inline-block;
}
.switch-check {
  position: absolute;
  visibility: hidden;
}
.switch-label {
  cursor: pointer;
  display: block;
  height: 42px;
  text-indent: -9999px;
  width: 115px;
}
.switch-label:before {
  background: #fff;
  background: -webkit-radial-gradient(
    45%,
    circle,
    rgb(116, 78, 78) 0%,
    rgb(255, 113, 113) 100%
  );
  border-radius: 10px;
  border: 1px solid #742323;
  box-shadow: 0 2px 5px rgba(255, 67, 48, 0.6),
    0 0 5px rgba(255, 159, 109, 0.5) inset;
  content: "";
  display: block;
  height: 10px;
  left: -20%;
  position: absolute;
  top: 16px;
  transition: all 0.2s;
  width: 10px;
  z-index: 12;
}
.switch-label:after {
  background: #fff;
  background: -moz-radial-gradient(
    45%,
    circle,
    rgba(60, 60, 60, 0.6) 0%,
    rgba(151, 151, 151, 0.6) 100%
  );
  border-radius: 10px;
  border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
  content: "";
  display: block;
  height: 10px;
  right: -20%;
  position: absolute;
  top: 16px;
  transition: all 0.2s;
  width: 10px;
  z-index: 12;
}
.switch-label span {
  background: linear-gradient(#4f4f4f, #2b2b2b);
  border-radius: 30px;
  border: 1px solid #1a1a1a;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5),
    0 1px 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
  display: block;
  height: 38px;
  left: 1px;
  position: absolute;
  top: 1px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  width: 53px;
}
.switch-label span:before {
  background: #fff;
  background: -webkit-linear-gradient(
    left,
    rgba(48, 48, 48, 0.4),
    rgba(34, 34, 34, 0.4)
  );
  background: linear-gradient(
    left,
    rgba(48, 48, 48, 0.4),
    rgba(34, 34, 34, 0.4)
  );
  border-radius: 30px 10px 10px 30px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2) inset;
  content: "";
  display: block;
  height: 33px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 21px;
}
.switch-label span:after {
  background: #fff;
  background: -webkit-linear-gradient(
    right,
    rgba(48, 48, 48, 0.4),
    rgba(34, 34, 34, 0.4)
  );
  border-radius: 10px 30px 30px 10px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2) inset;
  content: "";
  display: block;
  height: 33px;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 21px;
}
.switch-check:checked + .switch-label span {
  left: 59px;
}

</style>