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

input {
  --s: 50px; /* adjust this to control the size*/
  
  height: calc(var(--s) + var(--s)/5);
  width: auto; /* some browsers need this */
  aspect-ratio: 2.25;
  border-radius: var(--s);
  margin: calc(var(--s)/2);
  display: grid;
  cursor: pointer;
  background-color:#ff7a7a;
  box-sizing: content-box;
  overflow: hidden;
  transition: .3s .1s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input:before{
  content: "";
  padding: calc(var(--s)/10);
  --_g: radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%,#000 96%,#0000);
  background: 
    var(--_g) 0 /var(--_p,var(--s)) 100% no-repeat content-box,
    var(--_g) var(--_p,0)/var(--s)  100% no-repeat content-box,
    #fff;
  mix-blend-mode: darken;
  filter: blur(calc(var(--s)/12)) contrast(11);
  transition: .4s, background-position .4s .1s,
    padding cubic-bezier(0,calc(var(--_i,-1)*200),1,calc(var(--_i,-1)*200)) .25s .1s;
}
input:checked {
  background-color: #85ff7a;
}
input:checked:before {
  padding: calc(var(--s)/10 + .05px) calc(var(--s)/10);
  --_p: 100%;
  --_i: 1;
}

body {
  background:#15202a;
  margin:0;
  height:100vh;
  display:grid;
  place-content:center;
  place-items:center;
}