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

input {
  --s:80px; /* adjust this to control the size*/
  
  height: var(--s);
  width: auto;
  aspect-ratio: 2;
  border: calc(var(--s)/5) solid #0000;
  outline:2px solid red;
  border-radius: var(--s);
  background:
    radial-gradient(farthest-side,#fafafa 85%,#0005,#0000) left/var(--s) 100% no-repeat border-box;
  transition: 0.5s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  position:relative;
}
input:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:200%;
  height:100%;
  z-index:-1;
  background:linear-gradient(90deg,#20b68f 50%,#939393 0) 0;
  transition: 0.5s;
}
input:checked {
  background-position: right;
}
input:checked:before {
  transform:translate(50%);
}
body {
  background:pink;
  margin:0;
  height:100vh;
  display:grid;
  gap:10px;
  place-content:center;
}