<button class="btn-download" id="btn-auto-click">
   <div class="arrow"></div>
</button>

@keyframes button-shadow{
  from{
    transform: rotate(0);
    bottom: -5px;
    right: -5px;
    opacity: 1;
  }to{
    transform: rotate(40deg);
    bottom: 50px;
    right: -60px;
    opacity: 0;
  }
}

@keyframes button-arrow-rotate{
  0%{
      width: 15px;
      margin: -25px auto 0;
  }1%{
      width: 10px;
      height: 0px;
      margin-top: 15px;
      transform: rotate(45deg);
  }100%{
      width: 10px;
      margin-top: 15px;
      transform: rotate(45deg);
      height: 35px;
  }
}

@keyframes button-arrow-down{
  from{
      bottom: -25px;
      opacity: 1;
  }to{
      bottom: -40px;
      opacity: 0;
  }
}

@keyframes button-arrow-up{
  0%{
      height: 20px;
      transform: rotateZ(45deg);
      right: -7px;
  }1%{
      right: 0px;
      height: 10px;
      width: 0;
      transform: rotateZ(0);
  }100%{
      right: 0px;
      height: 10px;
      width: 20px;
      transform: rotateZ(0);
  }
}

body{
  width: 90%;
  display: flex;
  background: #28df99;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

button{
  background-color: #fff;
  width: 140px;
  height: 70px;
  border: none;
  outline: none;
  position: relative;
  border-radius: 5px;
  cursor: pointer;
  transition: all .5s;
  
  .arrow{
    height: 25px;
    width: 15px;
    background-color: #99f3bd;
    border-radius: 2px;
    margin: -25px auto 0;
    position: relative;
    &:after{
      content:'';
      height: 20px;
      width: 20px;
      position: absolute;
      background-color: #99f3bd;
      border-radius: 2px;
      transform: rotateZ(45deg) translate(1px,7px);
      bottom: 0;
      right: -7px;
      transition: all .5s;
      transition-delay: .5s;
    }
    &:before{
      content: '';
      background-color: #99f3bd;
      width: 25px;
      height: 10px;
      position: absolute;
      left: -5px;
      bottom: -25px;
      border-radius: 2px;
      transition: all .5s;
    }
  }
  
  &:after,&:before{
    content:'';
    position: absolute;
    z-index: -1;
    background-color: #99f3bd;
    height: 100%;
    width: 100%;
    bottom: -5px;
    right: -5px;
    border-radius: 5px;
  }
  
  &:after{
      animation-play-state: pause; 
  }
  
  &:active{
    width: 180px;
    height: 90px;
  }
  
  &:focus{
    &:after{   
      animation: button-shadow 1s;
    }
    
    .arrow{
      animation: button-arrow-rotate .5s forwards;
      animation-delay: .5s;
      &:after{
        animation: button-arrow-up .5s forwards;
        animation-delay: .5s;
      }
      &:before{
        animation: button-arrow-down .5s forwards;
      }
    }
  }
}