<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
<div class="button">
    <i class="fa fa-arrow-down" aria-hidden="true"></i>
    <span class="text">download</span>
    <span class="progress"></span>
</div>

body {
  background: #ececec;
} 
.button {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 160px;
   height: 40px;
   color: black;
   background: white;
   border-radius: 10px;
   margin: 0 15px;
   font-size: 18px;
   text-decoration: none;
   overflow: hidden;
}

.progress {
    content: '';
    position: absolute;
    top: 90%;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #4776E6; 
    background: -webkit-linear-gradient(to right, #8E54E9, #4776E6); 
    background: linear-gradient(to right, #8E54E9, #4776E6); 
    transition: all 4s;
  }

.text{
  z-index: 10;
}

i {
  margin: 0 8px 0 0;
  font-size: 16px;
  z-index: 10;
}

@keyframes tapDownload {
  0% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0);
  }
}

.fa-arrow-down{
    animation: tapDownload 1s ease infinite;
}

@keyframes downloading {
  0% {
    transform: scale(.7);
  }
  100% {
    transform: scale(1);
  }
}

.fa-download {
  animation: downloading 1s ease infinite alternate-reverse;
}

const btn = document.querySelectorAll('.button')[0];
const pr = document.querySelectorAll('.progress')[0];
const text = document.querySelectorAll('.text')[0];
const icon = document.querySelectorAll('.fa')[0];

btn.addEventListener('click', () => {
  if ('fa fa-arrow-down' !== icon.className) return
  pr.style.left = '0';
  icon.classList.remove('fa-arrow-down');
  icon.classList.add('fa-download');
  text.innerText = 'downloading';
  setTimeout(() => {
    pr.style.top = '0';
    pr.style.transitionDuration = '1s';
    text.style.color = 'white';
    text.innerText = 'downloaded';
    icon.style.color = 'white';
    icon.classList.remove('fa-download');
    icon.classList.add('fa-check');
  }, 4000);
});