• HTML
• CSS
• JS

HTML

<button class="submitbtn">Submit</button>

CSS

*{
    margin:0;
    padding:0;
    font-family:"Monserrat",sans-serif;
    box-sizing:border-box;
}

body{
    background-color:#FF7F50;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.submitbtn{
    width:320px;
    height:100px;
    background-color:#34495e;
    color:#f1f1f1;
    font-size:30px;
    font-weight:600;
    border:none;
    border-radius:8px;
    cursor:pointer;
    position:relative;
    transition:.3s ease-in-out;
}

.submitbtn:hover{
    opacity:.9;
}

.submitbtn.submiting{
    height:28px;
}

.submitbtn.submiting::before{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    background-color:#f1f1f1;
    left:4px;
    top:4px;
    border-radius:50%;
    animation:move 1s infinite ease-in-out;
}

@keyframes move{
    50%{
        opacity:1;
    }
    to{
        left:296px;
    }
}

JS

const submit_btn = document.querySelector(".submitbtn");
submit_btn.addEventListener("click",() => {
    submit_btn.classList.add("submiting");
    submit_btn.innerHTML = "";
    setTimeout(() => {
        submit_btn.classList.remove("submiting");
        submit_btn.innerHTML = "Done";
    },3000)
});

/* 
  All the credits to: https://www.youtube.com/watch?v=JGCMy7ZpU1A
*/