.btn, .btn:link, .btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 4rem;
    display: inline-block;
    border-radius: 10rem;
    transition: all .2s;
    position: relative;
    font-size: 1.6rem;
    border: none;
    cursor: pointer; 
}

@media only screen and (max-width: 800px) {
    .btn, .btn:link, .btn:visited {
        padding: .8rem 4rem;
    }
}
  
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.btn:hover::after {
    transform: scaleX(1.2) scaleY(1.4);
    opacity: 0;
}

.btn:active, .btn:focus {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.btn--purple {
    background: -webkit-gradient(linear, left top, left bottom, from(#cb82f8), to(#9593ff));
    background: linear-gradient( 180deg, #cb82f8, #9593ff);
  color: white; 
}

.btn--purple::after {
    background: -webkit-gradient(linear, left top, left bottom, from(#cb82f8), to(#9593ff));
    background: linear-gradient( 180deg, #cb82f8, #9593ff);
}

.btn--white {
    background-color: white;
    color: var(--light-purple);
}

.btn--white::after {
    background-color: white;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
}

.btn--animated {
  animation: moveInBottom .5s ease-out .75s;
  animation-fill-mode: backwards; 
}

.btn-text:link, .btn-text:visited {
  font-size: 1.6rem;
  color: white;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid white;
  padding: 3px;
  transition: all .2s; 
}

.btn-text:hover {
  background-color: white;
  color: #fff;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.btn-text:active {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transform: translateY(0);
}