$btn-color-1: #0253b5;
$btn-color-2: #00bbf0;
$btn-color-3: $second-color;

.btn {
  appearance: none;
  border: 0;
  border-radius: 4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  &.active {
    opacity: 0.5;
    cursor: not-allowed;
  }
  &.btn-1 {
    @include boxshadow-md($btn-color-2);
    @include gradient-gen($btn-color-2);
    color: white;
    padding: 1.2rem 1rem;
    // font-weight: bold;
    &:hover {
      @include boxshadow-hover($btn-color-2);
    }
  }
  &.btn-2 {
    @include boxshadow-md($btn-color-1);
    @include gradient-gen($btn-color-1);
    color: white;
    padding: 1.2rem 1rem;
    // font-weight: bold;
    &:hover {
      @include boxshadow-hover(red);
    }
  }
  &.large {
    padding: 1.1rem 3rem;
    font-size: 1.1rem;
  }
}