download-btn-fill.scss

$black: #050507;
$blue: #D1FFFF;
$yellow: #FFF2C6;

body {
  background-color: $black;
}

.download {

  &__button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align:center;
    cursor: pointer;
    color: $yellow;
    text-decoration: none;
    border: .3rem solid $blue;
    padding: 1rem 2rem;
    overflow: hidden;
    position: absolute;
    transition: .5s;
    
    &:hover {
      border-bottom-right-radius: 1rem;
      border-top-right-radius: 1rem;
      border-top-left-radius: 1rem;
      border-bottom-left-radius: 1rem;
      border-color: darken($blue, 20);
      animation:  border-radius .5s;
      
      &:before {
        background-color: darken($blue, 80);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        z-index: -1;
        content: "";
        animation:  background-slidein .5s;
        animation-timing-function: cubic-bezier(0.42,0,0.58,1);
      }
    }
  }
}

@keyframes background-slidein {
  0% {
    margin-left: 100%;
    background-color: darken($blue, 10);
  }
  
  60% {
    margin-left: 70%;
  }

  100% {
    margin-left: 0%;
  }
}

@keyframes border-radius {
  0% {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  60% {
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem;
  }
  100% {
    border-top-left-radius: .9rem;
    border-bottom-left-radius: .9rem;
  }
}