css/modules/primer-marketing-buttons/lib/button.scss

.btn-orange { @include btn-solid($white, lighten($orange-500, 7.5%), darken($orange-500, 7.5%)); }
.btn-blurple { @include btn-solid($white, mix($blue-400, $purple-400, 35%), mix($blue-600, $purple-600, 35%)); }

.btn-outline-purple { @include btn-outline($purple); }
.btn-outline-orange { @include btn-outline($orange); }
.btn-outline-green { @include btn-outline($green); }

@mixin btn-transparent-active {
  color: $gray-800;
  background-color: $white;
  background-image: none;
  border-color: $white;
}

.btn-transparent {
  color: $white;
  background-color: transparent;
  background-image: none;
  border: 1px solid $white-fade-50;

  &:hover,
  &:active {
    @include btn-transparent-active;
  }
}

// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
.btn-large {
  padding: 0.75em 1.25em;
  font-size: inherit;
  border-radius: 6px;
}