.btn {
  &:active,  {
    outline: 0;
  }
  &--gradient {
    background-image: linear-gradient(33deg, $orange  -12%, $pink  50%);
    background-size: 200% auto;
    border-radius: to-rem(50);
    color: white;
    font-size: to-rem(14);
    font-weight: 600;
    padding: to-rem(8) 0;
    text-align: center;
    text-decoration: none;
    transition: 0.5s;

    &:hover {
      box-shadow: to-rem(-1) 0 to-rem(10) rgba(#000, 0.25);
      color: white;
    }
  }

  &--black {
    background-color: black;
    border-radius: to-rem(50);
    color: white;
    padding: to-rem(8) to-rem(54);

    &:hover {
      box-shadow: to-rem(-1) 0 to-rem(10) rgba(#000, 0.25);
      color: white;
    }
  }

  &--white {
    color: white;
  }
}

.btn-link {
  color: $blue;
  font-size: to-rem(14);
}