.btn-gradient-blue-green {
  @include button-gradient-variant(
    $color: $white,
    $color-hover: $white,
    $background-image: linear-gradient(256deg, $color-malachite, $color-dodger-blue),
    $background-image-hover: linear-gradient(185deg, $color-malachite, $color-dodger-blue)
  );
}

.btn-gradient-blue {
  @include button-gradient-variant(
    $color: $white,
    $color-hover: $white,
    $background-image: linear-gradient(84deg, $color-cornflower-blue, $color-dodger-blue),
    $background-image-hover: linear-gradient(0deg, $color-cornflower-blue, $color-dodger-blue)
  );
}

.btn-outline-white {
  @include button-outline-variant($white);

  &:hover {
    color: $color-cornflower-blue;
    background-color: $white;
  }
}

.btn-with-cta {
  position: relative;
  padding: 0;

  a {
    display: block;
    padding: $btn-padding-y $btn-padding-x;
    color: inherit;
    text-decoration: none;
  }

  &.btn-lg a {
    padding: $btn-padding-y-lg $btn-padding-x-lg;
  }

  &.btn-sm a {
    padding: $btn-padding-y-sm $btn-padding-x-sm;
  }

  &.btn-block a {
    display: block;
    width: 100%;
  }
}