* optional arrow:
↗ after the text
* ug-btn.js wraps the text into the label roll for you:
*
Text
* Text
*
* Hover is MOTION ONLY on every variant: the label rolls up, the arrow nudges. No colour change.
* The same curve as the "See all stories" pill (.ug-news__all, UG_WP/news).
*
* Also restyled here, so existing pages follow the system without new markup:
* .button (the sections' shared button) = Large Primary
* .button--ghost (the sections' outline button) = Large Secondary
* the header menu's Order Samples (li.menu-item.is-button) = Large Secondary on dark
* Those rules start with "html body" on purpose: the sections' own .button rules and the
* Additional CSS nav rules print AFTER this file, so they need to be outranked, not out-ordered.
*/
/* ---------- Base (Large Primary) ---------- */
.ug-btn,
html body .button,
html body .button--ghost {
--ug-btn-bg: #00B03C;
--ug-btn-fg: #FFFFFF;
--ug-btn-border: transparent;
--ug-btn-ring: #00B03C;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-sizing: border-box;
block-size: 2.5rem;
padding-block: 0;
padding-inline: 2.875rem;
border: 2px solid var(--ug-btn-border);
border-radius: 100px;
background-color: var(--ug-btn-bg);
color: var(--ug-btn-fg);
font-family: 'Exo 2', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1.375;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.1s ease;
}
/* ---------- Variants ---------- */
.ug-btn--secondary,
html body .button--ghost {
--ug-btn-bg: transparent;
--ug-btn-fg: #002B2E;
--ug-btn-border: #00B03C;
}
/* Secondary on a dark section: white label, white focus ring. */
.ug-btn--secondary.ug-btn--on-dark,
:is(.ug-section--dark, .bg-dark) .ug-btn--secondary,
:is(.ug-section--dark, .bg-dark) .button--ghost {
--ug-btn-fg: #FFFFFF;
--ug-btn-ring: #FFFFFF;
}
.ug-btn--on-dark,
:is(.ug-section--dark, .bg-dark) .ug-btn,
:is(.ug-section--dark, .bg-dark) .button {
--ug-btn-ring: #FFFFFF;
}
/* Inverse: only for buttons on photos / imagery. */
.ug-btn--inverse {
--ug-btn-bg: #FFFFFF;
--ug-btn-fg: #002B2E;
--ug-btn-border: transparent;
}
/* Small: product cards only. The ::after makes the tap target about 44px tall. */
.ug-btn--sm {
block-size: 2.125rem;
padding-inline: 1.25rem;
font-size: 0.8rem;
}
.ug-btn--sm::after {
content: "";
position: absolute;
inset: -0.3125rem 0;
}
/* No colour change on hover, focus or press: the sections' old .button:hover
(#002B2E fill) and .button--ghost:hover (green fill) are switched off here. */
html body .button:is(:hover, :focus, :active),
html body .button--ghost:is(:hover, :focus, :active) {
background-color: var(--ug-btn-bg);
border-color: var(--ug-btn-border);
color: var(--ug-btn-fg);
}
/* ---------- The label roll + arrow ---------- */
.ug-btn__roll {
display: block;
height: 1.375em;
overflow: hidden;
}
.ug-btn__label {
display: block;
transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}
.ug-btn__arrow {
display: inline-flex;
transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (hover: hover) {
:is(.ug-btn, .button, .button--ghost, .menu-item.is-button):hover .ug-btn__label {
transform: translateY(-100%);
}
:is(.ug-btn, .button, .button--ghost, .menu-item.is-button):hover .ug-btn__arrow {
transform: translate(3px, -3px);
}
}
/* Keyboard focus: the rolled label plus a ring. */
:is(.ug-btn, .button, .button--ghost):focus-visible .ug-btn__label,
.menu-item.is-button:has(> a:focus-visible) .ug-btn__label {
transform: translateY(-100%);
}
:is(.ug-btn, .button, .button--ghost):focus-visible .ug-btn__arrow,
.menu-item.is-button:has(> a:focus-visible) .ug-btn__arrow {
transform: translate(3px, -3px);
}
.ug-btn:focus-visible,
html body .button:focus-visible,
html body .button--ghost:focus-visible {
outline: 2px solid var(--ug-btn-ring);
outline-offset: 3px;
}
/* Press */
.ug-btn:active,
html body .button:active,
html body .button--ghost:active {
transform: scale(0.97);
}
/* Disabled */
.ug-btn[aria-disabled="true"],
.ug-btn:disabled,
html body .button[aria-disabled="true"],
html body .button:disabled,
html body .button--ghost[aria-disabled="true"],
html body .button--ghost:disabled {
opacity: 0.4;
pointer-events: none;
cursor: default;
}
/* ---------- Header menu: Order Samples = Large Secondary on dark ----------
The li is the pill (the theme stretches the link over it with a::before).
Replaces the Additional CSS ghost button (fill on hover) and the theme's
green / #CCEFD8 hovers. */
html body header.header #primary-menu:not(.is-open) #menu-main-menu .menu-item.is-button {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
block-size: 2.5rem;
padding-block: 0;
padding-inline: 2.875rem;
border: 2px solid #00B03C;
border-radius: 100px;
background-color: transparent;
color: #FFFFFF;
font-family: 'Exo 2', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1.375;
letter-spacing: 0;
white-space: nowrap;
transition: transform 0.1s ease;
}
html body header.header #primary-menu:not(.is-open) #menu-main-menu .menu-item.is-button:hover {
background-color: transparent;
color: #FFFFFF;
}
html body header.header #primary-menu:not(.is-open) #menu-main-menu .menu-item.is-button:active {
transform: scale(0.97);
}
html body header.header #primary-menu:not(.is-open) #menu-main-menu .menu-item.is-button:has(> a:focus-visible) {
outline: 2px solid #FFFFFF;
outline-offset: 3px;
}
html body header.header #menu-main-menu .menu-item.is-button > a:focus-visible {
outline: none;
}
/* 1024-1279px: keep the narrower side padding from Additional CSS, so the
button stays on one line beside the centred links (it wraps at ~1106px with
the full 2.875rem). */
@media (min-width: 1024px) and (max-width: 1279px) {
html body header.header #primary-menu:not(.is-open) #menu-main-menu .menu-item.is-button {
padding-inline: 1.75rem;
}
}
/* ---------- Button row: a pair that stays side by side on phones (1.5.9) ----------
around the buttons. From 600px the buttons keep their
natural width. Below 600px they share the row by label length and only the side
padding shrinks (still Large: 40px, 1rem label). If a screen is ever too narrow
for both labels, the second wraps underneath instead of cutting a label off. */
.ug-btn-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
@media (max-width: 37.49rem) {
.ug-btn-row {
gap: 0.625rem;
}
.ug-btn-row > .ug-btn,
.ug-btn-row > .button,
.ug-btn-row > .button--ghost {
flex: 1 1 auto;
padding-inline: 0.625rem;
}
}
/* ---------- Reduced motion: no roll, no nudge ---------- */
@media (prefers-reduced-motion: reduce) {
.ug-btn__label,
.ug-btn__arrow {
transition: none;
}
}