• HTML
• CSS
• JS

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">

<div class="upload-btn">
    
    <div class="text">
        <span class="material-icons">attach_file</span>
        Document.pdf
    </div>
    
    <div class="btn">
        <div class="btn-text">Upload</div>    
    </div>
    
    <div class="progress">
        <p><i class="ri-check-fill"></i>Completed</p>
    </div>
    
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #fab1a0;
    font-family: "Poppins", sans-serif;
    display: grid;
    place-items: center;
    height: 100vh;
    font-size: 0.9em;
}

.upload-btn {
    position: relative;
    height: 50px;
    width: 270px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    overflow: hidden;
}

.upload-btn:active {
    animation: jelly 0.5s ease;
}

@keyframes jelly {
    50% {
        transform: scale(0.96);
    }

    70% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.text {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.btn {
    position: absolute;
    top: 0;
    right: 0;
    background: #a55eea;
    height: 43px;
    width: 70px;
    color: #fff;
    display: grid;
    place-items: center;
    margin: 4px;
    border-radius: 6px;
}

.toggle--upload {
    animation: uploading 3.5s ease-in;
}

@keyframes uploading {
    5% {
        margin: 0;
        height: 100%;
    }

    20%,
    100% {
        margin: 0;
        height: 100%;
        width: 100%;
    }
}

.toggle--upload-text {
    animation: upload-text 1s ease-in;
}

@keyframes upload-text {
    20% {
        opacity: 0;
        transform: translateY(-15px);
    }

    50% {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, 20px);
        opacity: 0;
    }

    100% {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.progress{
    background: #2b3347;
    color: #fff;
    position: absolute;
    height: 100%;
    top: 46px;
    display: grid;
    place-items: center;
    width: 0;
}

.toggle--progress {
    animation: uploading-done 3s forwards 1.5s;
}

@keyframes uploading-done {
    30%{
        width: 100%;
    }

    35%{
        width: 100%;
        top: 46px;
    }

    60%,
    80%{
        width: 100%;
        top: 0;
    }

    100%{
        width: 100%;
        top: 50px;
    }
}

.progress p{
    display: flex;
    align-items: center;
}

.progress i{
    margin-right: 0.2rem;
    font-size: 1.3em;
}

JS

const btn = document
    .querySelector('.btn');
    
const btnText = document
    .querySelector('.btn-text');
    
const progress = document
    .querySelector('.progress');
    
document
    .querySelector('.upload-btn')
    .addEventListener('click', ()=>{
       
       btn.classList.remove('toggle--upload');
       btnText.classList.remove('toggle--upload-text');
       progress.classList.remove('toggle--progress');
       
       setTimeout(()=>{
            btn.classList.add('toggle--upload');
            btnText.classList.add('toggle--upload-text');
            progress.classList.add('toggle--progress');
       },50);
        
    });

/*
 All cretdits to: https://www.youtube.com/watch?v=CIhqyKGSbPo
*/