<input type="checkbox" name="one" checked>
<input type="checkbox" name="two" style="--s:60px">

input {
  --s: 50px; /* adjust this to control the size*/
  
  height: var(--s);
  aspect-ratio: 2.4;
  width: auto;
  cursor: pointer;
  display: inline-grid;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input:before {
  content: "";
  border-radius: var(--s);
  margin-inline: 0 calc(var(--s)/500);
  box-shadow: 0 0 0 3px #7a7a7a;
  background:
    radial-gradient(farthest-side,#fafafa 97%,#0000) left/var(--s) var(--s) no-repeat,
    #db281f;
  transition: 
    var(--t,margin-inline-end) cubic-bezier(0,933,1,933) 0.5s, /* 933 = (2.4 - 1)*500/0.75 */
    background 0s 0.25s;
}

input:checked:before {
  background-position: right;
  background-color: #20b68f;
  margin-inline: calc(var(--s)/500) 0;
  --t: margin-inline-start;
}



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