@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway', Arial, sans-serif;
}
body
{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #222;
  min-height: 100vh;
}
.btn
{
  position: relative;
  width: 200px;
  height: 70px;
  background: #444;
  color: #999;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.8s;
  transition-delay: 0.5s;
  overflow: hidden;
}
.btn .fas
{
  margin-right: 8px;
}
.btn .download
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
  transition: 0.3s;
}
.btn.active .download
{
  transform: translate(-50%,60px);
  animation: bottom_top 0.5s linear forwards;
  animation-delay: 12s;
}
.btn .completed
{
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%,-60px);
  white-space: nowrap;
  color: #222;
}
.btn.active .completed
{
  animation: top_bottom 1.3s linear forwards;
  animation-delay: 6.5s;
}
.btn.active
{
  width: 600px;
  height: 15px;
  animation: btn_width 4.5s linear forwards;
  animation-delay: 5s;
}
.btn.active::before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: -webkit-linear-gradient(to right, #0099ff, #cd00f7); 
	background: linear-gradient(to right, #0077ff, #d400ff); 
  animation: before_active 7s linear forwards;
  animation-delay: 2.5s;
}
.btn.active::after
{
  content: '\f00c';
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: "Font Awesome 5 Free";
  color: rgb(47, 255, 169);
  transform: translate(-50%,-50%) scale(0);
  transition: 0.3s;
  animation: check_scale 2s linear forwards;
  animation-delay: 9s;
}
@keyframes before_active
{
  0%
  {
    width: 0%;
    height: 100%;
  }
  30%,95%
  {
    width: 100%;
    height: 100%;
  }
  100%
  {
    width: 100%;
    height: 0%;
  }
}
@keyframes btn_width
{
  0%
  {
    width: 600px;
    height: 15px;
  }
  20%,70%
  {
    width: 200px;
    height: 70px;
  }
  80%,90%
  {
    width: 100px;
    height: 100px;
  }
  100%
  {
    width: 200px;
    height: 70px;
  }
}
@keyframes top_bottom
{
  0%
  {
    transform: translate(-50%,-60px);
  }
  20%,90%
  {
    top: 50%;
    transform: translate(-50%,-50%);
  }
  100%
  {
    top: 120%;
    transform: translate(-50%,-50%);
  }
}
@keyframes bottom_top
{
  0%
  {
    transform: translate(-50%,60px);
  }
  100%
  {
    transform: translate(-50%,-50%);
  }
}
@keyframes check_scale
{
  0%
  {
    transform: translate(-50%,-50%) scale(0);
  }
  20%,90%
  {
    transform: translate(-50%,-50%) scale(1.3);
  }
  100%
  {
    transform: translate(-50%,100px) scale(1.3);
  }
}