<label for="checkbox">    <input type="checkbox" id="checkbox">    <div class="circle"></div></label><label for="checkbox2">    <input type="checkbox" id="checkbox2">    <div class="circle"></div></label>

*{    margin: 0;    padding: 0;    box-sizing: border-box;}body{    width: 100%;    height: 100vh;    display: flex;    justify-content: center;    align-items: center;    flex-direction: column;    background: #6da8ff;}label{    position: relative;    width: 120px;    height: 50px;    border-radius: 50px;    background: #fff;    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25);    cursor: pointer;    margin: 10px 0;}input{    display: none;}.circle{    width: 110px;    height: 110px;    border-radius: 50%;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    transition: .5s ease-in-out;    pointer-events: none;}.circle::before{    content: '';    position: absolute;    top: 50%;    left: 0;    transform: translateY(-50%);    width: 40px;    height: 40px;    background: #ff6262;    transition: .5s;    transition-delay: .5s;    border-radius: 50%;}input:checked ~ .circle{    transform: translate(-50%, -50%) rotate(180deg);}input:checked ~ .circle::before{    background: #6fff57;}