galaxy/Toggle-switches/JkHuger_itchy-turtle-45.html

<div class="wrapper">
<input type="checkbox" name="checkbox" class="switch">
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: switch, dark, theme, light, moon, sun, theme-switch */
.switch {
  position: relative;
  width: 130px;
  height: 50px;
  margin: 0px;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgb(4,52,73);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 25px;
  transition: background-image .7s ease-in-out;
  outline: none;
  cursor: pointer;
  overflow: hidden;
}

.switch:checked {
  background-color: rgb(0, 195, 255);
  background-size: cover;
  transition: background-image 1s ease-in-out;
}

.switch:after {
  content: '';
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  left: 2px;
  top: 2px;
  transform: translateX(0px);
  animation: off .7s forwards cubic-bezier(.8, .5, .2, 1.4);
  box-shadow: inset 5px -5px 4px rgba(53, 53, 53, 0.3);
}

@keyframes off {
  0% {
    transform: translateX(80px);
    width: 46px;
  }

  50% {
    width: 75px;
    border-radius: 25px;
  }

  100% {
    transform: translateX(0px);
    width: 46px;
  }
}

.switch:checked:after {
  animation: on .7s forwards cubic-bezier(.8, .5, .2, 1.4);
  box-shadow: inset -5px -5px 4px rgba(53, 53, 53, 0.3);
}

@keyframes on {
  0% {
    transform: translateX(0px);
    width: 46px;
  }

  50% {
    width: 75px;
    border-radius: 25px;
  }

  100% {
    transform: translateX(80px);
    width: 46px;
  }
}

.switch:checked:before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  left: 15px;
  top: 5px;
  transform-origin: 53px 10px;
  background-color: transparent;
  box-shadow: 5px -1px 0px #fff;
  filter: blur(0px);
  animation: sun .7s forwards ease;
}

@keyframes sun {
  0% {
    transform: rotate(170deg);
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
  }

  50% {
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
  }

  90% {
    background-color: #f5daaa;
    box-shadow: 0px 0px 10px #f5deb4,
    0px 0px 20px #f5deb4,
    0px 0px 30px #f5deb4,
     inset 0px 0px 2px #efd3a3;
    filter: blur(1px);
  }

  100% {
    transform: rotate(0deg);
    background-color: #f5daaa;
    box-shadow: 0px 0px 10px #f5deb4,
    0px 0px 20px #f5deb4,
    0px 0px 30px #f5deb4,
     inset 0px 0px 2px #efd3a3;
    filter: blur(1px);
  }
}

.switch:before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  left: 15px;
  top: 5px;
  filter: blur(1px);
  background-color: #f5daaa;
  box-shadow: 0px 0px 10px #f5deb4,
0px 0px 20px #f5deb4,
0px 0px 30px #f5deb4,
 inset 0px 0px 2px #efd3a3;
  transform-origin: 53px 10px;
  animation: moon .7s forwards ease;
}

@keyframes moon {
  0% {
    transform: rotate(0deg);
    filter: blur(1px);
  }

  50% {
    filter: blur(1px);
  }

  90% {
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
  }

  100% {
    transform: rotate(170deg);
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
  }
}

</style>