@primer/css/dist/marketing-buttons.css

The CSS implementation of GitHub's Primer Design System

[data-color-mode=light][data-light-theme*=dark],[data-color-mode=dark][data-dark-theme*=dark]{--color-mktg-btn-shadow-outline:rgba(255, 255, 255, 0.25) 0 0 0 1px inset;--color-mktg-btn-bg:#f6f8fa;--color-mktg-btn-shadow-focus:rgba(255, 255, 255, 0.25) 0 0 0 4px;--color-mktg-btn-shadow-hover:0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);--color-mktg-btn-shadow-hover-muted:rgb(255, 255, 255) 0 0 0 2px inset}@media(prefers-color-scheme: light){[data-color-mode=auto][data-light-theme*=dark]{--color-mktg-btn-shadow-outline:rgba(255, 255, 255, 0.25) 0 0 0 1px inset;--color-mktg-btn-bg:#f6f8fa;--color-mktg-btn-shadow-focus:rgba(255, 255, 255, 0.25) 0 0 0 4px;--color-mktg-btn-shadow-hover:0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);--color-mktg-btn-shadow-hover-muted:rgb(255, 255, 255) 0 0 0 2px inset}}@media(prefers-color-scheme: dark){[data-color-mode=auto][data-dark-theme*=dark]{--color-mktg-btn-shadow-outline:rgba(255, 255, 255, 0.25) 0 0 0 1px inset;--color-mktg-btn-bg:#f6f8fa;--color-mktg-btn-shadow-focus:rgba(255, 255, 255, 0.25) 0 0 0 4px;--color-mktg-btn-shadow-hover:0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);--color-mktg-btn-shadow-hover-muted:rgb(255, 255, 255) 0 0 0 2px inset}}:root,[data-color-mode=light][data-light-theme*=light],[data-color-mode=dark][data-dark-theme*=light]{--color-mktg-btn-shadow-outline:rgba(0, 0, 0, 0.15) 0 0 0 1px inset;--color-mktg-btn-bg:#1b1f23;--color-mktg-btn-shadow-focus:rgba(0, 0, 0, 0.15) 0 0 0 4px;--color-mktg-btn-shadow-hover:0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);--color-mktg-btn-shadow-hover-muted:rgba(0, 0, 0, 0.7) 0 0 0 2px inset}@media(prefers-color-scheme: light){[data-color-mode=auto][data-light-theme*=light]{--color-mktg-btn-shadow-outline:rgba(0, 0, 0, 0.15) 0 0 0 1px inset;--color-mktg-btn-bg:#1b1f23;--color-mktg-btn-shadow-focus:rgba(0, 0, 0, 0.15) 0 0 0 4px;--color-mktg-btn-shadow-hover:0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);--color-mktg-btn-shadow-hover-muted:rgba(0, 0, 0, 0.7) 0 0 0 2px inset}}@media(prefers-color-scheme: dark){[data-color-mode=auto][data-dark-theme*=light]{--color-mktg-btn-shadow-outline:rgba(0, 0, 0, 0.15) 0 0 0 1px inset;--color-mktg-btn-bg:#1b1f23;--color-mktg-btn-shadow-focus:rgba(0, 0, 0, 0.15) 0 0 0 4px;--color-mktg-btn-shadow-hover:0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);--color-mktg-btn-shadow-hover-muted:rgba(0, 0, 0, 0.7) 0 0 0 2px inset}}.btn-mktg{position:relative;z-index:1;display:inline-block;padding:.9rem 1.5rem 1.1rem;font-size:1rem;font-weight:var(--base-text-weight-semibold, 600);line-height:1;color:var(--bgColor-default, var(--color-canvas-default));text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;background:linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),var(--color-mktg-btn-bg) !important;border:0;border-radius:.375rem;transition:box-shadow .2s,outline .2s ease;appearance:none !important}.btn-mktg::before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;content:"";background:linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;border-radius:inherit;opacity:0;opacity:0;transition:opacity .2s;background-blend-mode:normal}.btn-mktg:hover{text-decoration:none;box-shadow:var(--color-mktg-btn-shadow-hover) !important}.btn-mktg:hover::before,.btn-mktg:focus::before,.btn-mktg:focus-visible::before,.btn-mktg.focus::before{opacity:1}.btn-mktg:focus{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:2px;box-shadow:none}.btn-mktg:focus:not(:focus-visible){outline:solid 1px rgba(0,0,0,0);box-shadow:none}.btn-mktg:focus-visible{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:2px;box-shadow:none}.btn-mktg:active::before{opacity:.5 !important}.btn-mktg.disabled,.btn-mktg[disabled]{pointer-events:none;cursor:default;opacity:.5}.btn-muted-mktg{color:var(--fgColor-default, var(--color-fg-default)) !important;background:none !important;box-shadow:var(--color-mktg-btn-shadow-outline)}.btn-muted-mktg::before{display:none}.btn-muted-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted) !important}.btn-muted-mktg:active{box-shadow:var(--fgColor-default, var(--color-fg-default)) 0 0 0 3px inset !important}.btn-muted-mktg:disabled{box-shadow:var(--fgColor-muted, var(--color-fg-subtle)) 0 0 0 1px inset !important}.btn-subtle-mktg{color:var(--fgColor-default, var(--color-fg-default)) !important;background:none !important;box-shadow:none !important}.btn-subtle-mktg::before{background:none !important}.btn-subtle-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted) !important}.btn-signup-mktg{color:#fff;background:linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%),#2ea44f !important}.btn-signup-mktg::before{background:linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important}.btn-signup-mktg:focus{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:2px;box-shadow:none}.btn-signup-mktg:focus:not(:focus-visible){outline:solid 1px rgba(0,0,0,0);box-shadow:none}.btn-signup-mktg:focus-visible{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:2px;box-shadow:none}.btn-small-mktg{padding:.625rem 1rem .8125rem}.btn-large-mktg{padding:16px 30px 20px !important;font-size:1.25rem}
/*# sourceMappingURL=marketing-buttons.css.map */