• HTML
• CSS
• JS

HTML

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

<div class="button">
    <div class="content">
        <i class="bx bx-cloud-download"></i>
        <span class="button-text">Download</span>
    </div>
</div>

CSS

/* Google font import link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200,300,400,500,600,700&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
.button{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    height:95px;
    width:360px;
    background:#7D2AE8;
    border-radius:55px;
    box-shadow:0 5px 10px rgba(0,0,0,0.2);
    transition:all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
    cursor:pointer;
    overflow:hidden;
}
.button.active{
    height:20px;
    width:500px;
}
.button::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    height:100%;
    width:100%;
    border-radius:55px;
    background:#5B13B9;
}
.button.active::before{
    animation:layer 6s ease-in-out forwards;
}
@keyframes layer{
    100%{
        left:0%;
    }
}
.button .content{
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s ease;
    transition-delay:0.2s;
}
.button.active .content{
    transform:translateY(60px);
}
.content i,
.content .button-text{
    color:#FFF;
    font-size:40px;
    font-weight:500;
}
.content .button-text{
    font-size:28px;
    margin-right:8px;
}

JS

let button = document.querySelector(".button");

button.addEventListener("click",()=>{
    button.classList.add("active");
    
    setTimeout(()=>{
        button.classList.remove("active"); //remove active after 6s
        document.querySelector("i").classList.replace("bx-cloud-download","bx-check-circle")
        document.querySelector(".button-text").innerText = "Completed";
    },6000) // 1s = 1000ms
})

/*  All the credits: https://www.youtube.com/watch?v=N0ZGC7COC7s&list=PLImJ3umGjxdD-ix6iyUEWgsPT2GkAMwyX */