<input type="checkbox" >
<input type="checkbox" style="--s:60px">

input {
  --s:40px;
  
  height: var(--s);
  padding: calc(var(--s)/10);
  box-sizing: content-box;
  aspect-ratio: 2;
  border-radius: var(--s);
  background:
    radial-gradient(farthest-side,#fff 97%,#0000) 
     left/var(--s) 100% content-box no-repeat,
    grey;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: .3s;
}
input:checked {
  background-position: right;
  background-color: green;
}

body {
  margin:0;
  height:100vh;
  display:grid;
  grid-auto-flow :column;
  place-content: center;
  align-items:center;
  gap: 40px;
}