<input type="checkbox" checked>
<input type="checkbox" >

input {
  --s:80px; /* adjust this to control the size*/
  
  height: var(--s);
  width: auto;
  aspect-ratio: 2;
  padding: calc(var(--s)/5);
  border-radius: var(--s);
  background:
    radial-gradient(farthest-side,#fafafa 85%,#0005,#0000) left/var(--s) 100% no-repeat,
    linear-gradient(90deg,#20b68f 50%,#939393 0) right/200% 100% content-box;
  transition: 0.5s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
input:checked {
  background-position: right,left;
}

body {
  background:pink;
  margin:0;
  height:100vh;
  display:grid;
  gap:10px;
  place-content:center;
}