Artist Button

Here I put a button I coded to see what would happen if I merged two of my top interests: Art and Coding.
Use the code below as you wish!
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html{
                font-size: 50px;
            } 
            .toggle-control{
                display:none;
            }
            input.toggle-control + label{
                position:relative;
                display:block;
                margin: auto;
                transform: translateY(100%);
    
                width:10rem;
                height:4rem;
                background:#ddd;
                border-radius: 12rem;
    
                cursor:pointer;
                user-select: none;
            }
            input.toggle-control + label::before, input.toggle-control + label::after{
                content:'';
                transition: all 0.8s;
    
                display:block;
                position:absolute;
                top:0.08rem;
                left:0.08rem;
                bottom:0.08rem;
                right:0.08rem;
            }
    
            input.toggle-control + label::before{
                background-image:url('0545-illust.jpg');
                background-size: cover;
                background-position: center;
    
                border-radius: 12rem;
            }
            input.toggle-control + label::after{
                width:3.84rem;
    
                background-image: url('0545-button.jpg');
                background-size: cover;
                background-position: center; /* Center the image */
    
                border-radius: 100%;
                box-shadow:0 0.2rem 0.4rem rgba(0,0,0,0.3)
            }
    
            input.toggle-control:checked + label::before{
                background-image: url('0545-night-illust.jpg');
                background-size: cover;
                background-position: center;
                
                border-radius: 12rem;
            }
            input.toggle-control:checked + label::after{
                margin-left:6rem;
                background-image: url('0545-night-button.jpg');
                background-size: cover;
                background-position: center;
            }
        </style>
    </head>
    <body id="body">
        <input type="checkbox" id="toggle" class="toggle-control">
        <label for="toggle"></label>
    
        <script>
            let checkbox=document.getElementById("toggle")
            let body= document.getElementById("body")
            body.style.transition='all 0.8s';
            checkbox.addEventListener('change',(event)=>{
                if (event.currentTarget.checked) {
                body.style.backgroundColor="#637285"
            }else {
                body.style.backgroundColor=""
            }
            })
        </script>
    </body>
    </html>