.btn-mktg {
position: relative; z-index: 1; display: inline-block; appearance: none !important; // stylelint-disable-next-line primer/spacing padding: rem(($spacer-3) * 0.9) rem($spacer-4) rem(($spacer-3) * 1.1); // stylelint-disable-next-line primer/typography font-size: 1rem; font-weight: $font-weight-bold; line-height: 1; white-space: nowrap; vertical-align: middle; user-select: none; border: 0; // stylelint-disable-next-line primer/borders border-radius: rem(6px); @include btn-solid-mktg( var(--color-mktg-btn-text), var(--color-mktg-btn-bg-top), var(--color-mktg-btn-bg-bottom), var(--color-mktg-btn-bg-overlay-top), var(--color-mktg-btn-bg-overlay-bottom), ); &::before { background-blend-mode: overlay, normal; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; content: ""; // stylelint-disable-next-line primer/borders border-radius: rem(6px); opacity: 0; transition: opacity 0.4s; } &:hover { text-decoration: none; &::before { opacity: 1; transition: opacity 0.4s; } }
}
.btn-primary-mktg {
@include btn-solid-mktg( var(--color-mktg-btn-primary-text), var(--color-mktg-btn-primary-bg-top), var(--color-mktg-btn-primary-bg-bottom), var(--color-mktg-btn-primary-bg-overlay-top), var(--color-mktg-btn-primary-bg-overlay-bottom), );
}
.btn-enterprise-mktg {
@include btn-solid-mktg( var(--color-mktg-btn-enterprise-text), var(--color-mktg-btn-enterprise-bg-top), var(--color-mktg-btn-enterprise-bg-bottom), var(--color-mktg-btn-enterprise-bg-overlay-top), var(--color-mktg-btn-enterprise-bg-overlay-bottom), );
}
.btn-outline-mktg {
@include btn-outline-mktg( var(--color-mktg-btn-outline-text), var(--color-mktg-btn-outline-hover-text), var(--color-mktg-btn-outline-border), var(--color-mktg-btn-outline-hover-border), var(--color-mktg-btn-outline-focus-border), var(--color-mktg-btn-outline-focus-border-inset) ); transition: box-shadow 0.4s, color 0.4s;
}
.btn-transparent {
@include btn-outline-mktg( var(--color-mktg-btn-dark-text), var(--color-mktg-btn-dark-hover-text), var(--color-mktg-btn-dark-border), var(--color-mktg-btn-dark-hover-border), var(--color-mktg-btn-dark-focus-border), var(--color-mktg-btn-dark-focus-border-inset) ); transition: box-shadow 0.4s, color 0.4s;
}
// Size modifiers
.btn-small-mktg {
// stylelint-disable-next-line primer/spacing padding: rem(10px) rem($spacer-3) rem(13px);
}
.btn-large-mktg {
// stylelint-disable-next-line primer/spacing padding: 20px 30px 23px !important;
}