https://codepen.io/yee0/pen/YzQZXVV#_=_

https://yeeiop.tistory.com/entry/HTML-CSS-on-off-switch%EC%8A%A4%EC%9C%84%EC%B9%98-%EB%A7%8C%EB%93%A4%EA%B8%B0

.wrapper {
 
  height: 50px;
  text-align: center;
  margin: 50px auto;
}
#switch {
  position: absolute;
  /* hidden */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
 
.switch_label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 58px;
  height: 28px;
  background: #fff;
  border: 2px solid #777;
  border-radius: 20px;
  transition: 0.2s;
}
.switch_label:hover {
  background: #efefef;
}
.onf_btn {
  position: absolute;
  top: 4px;
  left: 3px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #777;
  transition: 0.2s;
}
 
/* checking style */
#switch:checked+.switch_label {
  background: #3cf;
  border: 2px solid #3cf;
}
 
#switch:checked+.switch_label:hover {
  background: #3cf;
}
 
/* move */
#switch:checked+.switch_label .onf_btn {
  left: 34px;
  background: #fff;
  box-shadow: 1px 2px 3px #00000020;
}

<div class="wrapper">
  <input type="checkbox" id="switch">
  <label for="switch" class="switch_label">
    <span class="onf_btn"></span>
  </label>
</div>