• HTML
• CSS
• JS

HTML

<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />

<div class="toggle-btn">
    <div class="icon">
        <i  class="bx bxs-lock-open"></i>
    </div>
</div>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#fff;
}
.toggle-btn{
    position:relative;
    height:155px;
    width:300px;
    background:#ddd;
    border-radius:100px;
    cursor:pointer;
    transition:all 0.4s ease;
}
.toggle-btn.active{
    background:#7d2ae8;
}
.toggle-btn .icon{
    position:absolute;
    top:50%;
    left:20px;
    transform:translateY(-50%);
    height:120px;
    width:120px;
    font-size:70px;
    color:#999;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#fff;
    border-radius:50%;
    transition:all 0.4s ease;
    box-shadow:0 0 6px rgba(0,0,0,0.1);
}
.toggle-btn.active .icon{
    left:calc(100% - 120px - 20px);
    color:#7d2ae8;
}

JS

const toggleBtn = document.querySelector(".toggle-btn"),
    lockIcon = document.querySelector(".icon i");
    
toggleBtn.addEventListener("click", () => {
    toggleBtn.classList.toggle("active");
    
    if(toggleBtn.classList.contains("active")){
        return lockIcon.classList.replace("bxs-lock-open","bxs-lock");
    }
    lockIcon.classList.replace("bxs-lock","bxs-lock-open");
});

/* All the credits: https://www.youtube.com/watch?v=0ufvEYUx4Og */