Button

What it is

A pill for the one action a band asks for. .hs-button alone is the gold primary. Every other route is a text link.

When to use

• The one action a band asks for: Start Free Membership in a hero, Apply now in a CTA band or in the award hero card.
• The submit control of a form, as a <button>.
• A repeated action inside the cards of a grid: .hs-button--secondary with .hs-button--sm.
• The second action in a dialog: .hs-button--secondary.
• The one submit button of a narrow form, such as Sign in in the Auth card: .hs-button--block.

When not to use

• A second route in the band: use a Text link in the same action row, never a second button.
• Two or more routes and no action: use a Link list.
• A card that leads somewhere: make the whole Card one <a>. Put no button and no “Learn more” inside it.
• The next page of a card grid: use Load more.
• A filter for one list: use Chips.

Rules

• Use one button per band, and one gold primary above the fold. Every other route in the band is a .hs-link.
• Keep one gold element per viewport. The site header's Join button is chrome and does not count. Lower on a light page, where gold is already in view, use .hs-button--navy. On a navy ground the primary stays gold, and .hs-button--on-navy replaces --navy.
• Use --secondary and --sm for card and dialog actions only. A band’s action is always the 48px default.
• Use --block only for the submit button of a form column 35rem (560px) wide or narrower. In a band, a button keeps its own width.
• Put the button and its link in .hs-actions: the button first, then at most one .hs-link.
• Write the label as a verb plus the noun the visitor gets (Start Free Membership, See scholarships). No “Click here”, “Learn more” or “Submit”, and no arrow glyph.
• Give every route data-ph-capture-attribute-cta (the destination name) and data-ph-capture-attribute-cta-loc (the band’s data-section slug). Never derive them from the label.

Accessibility

• Label contrast: navy deep on gold 12.4:1 (11.4:1 on hover), white on navy 12.4:1, navy on white 12.4:1. Secondary: navy on info surface 10.9:1, white on the navy-ground tint 9.3:1.
• Focus shows the shared ring: a 3px action-gold outline at 3px offset, plus a 1px navy ring. .hs-button:focus-visible restates it, so the gold glow does not replace it.
• The tap height is 48px, or 40px with --sm. 40px is the house minimum.
• prefers-reduced-motion: reduce removes the colour transition.

Variants

Primary

The one primary action above the fold. Gold, navy-deep label, with the gold glow.

<a class="hs-button" href="/join" data-ph-capture-attribute-cta="join" data-ph-capture-attribute-cta-loc="hero">Start Free Membership</a>

Navy

The same action lower on a light page, where gold already appears in the viewport.

<a class="hs-button hs-button--navy" href="/join" data-ph-capture-attribute-cta="join" data-ph-capture-attribute-cta-loc="how-it-works">Start Free Membership</a>

On navy

On a navy ground the primary stays gold. --on-navy replaces the navy button, which would disappear.

<a class="hs-button" href="/join" data-ph-capture-attribute-cta="join" data-ph-capture-attribute-cta-loc="closing">Start Free Membership</a>
<a class="hs-button hs-button--on-navy" href="/scholarships" data-ph-capture-attribute-cta="scholarships" data-ph-capture-attribute-cta-loc="scholarships">See scholarships</a>

Secondary

A tinted pill, never an outline. For card and dialog actions only: a repeated action inside cards, or the second action in a dialog. A second route on the page stays a text link.

<a class="hs-button hs-button--secondary" href="/benefits/career-insider" data-ph-capture-attribute-cta="benefit" data-ph-capture-attribute-cta-loc="catalog">View benefit</a>

Secondary on navy

The same class on a navy ground: white 8% fill, white label.

<a class="hs-button hs-button--secondary" href="/benefits" data-ph-capture-attribute-cta="benefits" data-ph-capture-attribute-cta-loc="support">View benefit</a>

Small

40px tall. For repeated actions in cards and dialogs only, never for the page’s main action.

<a class="hs-button hs-button--sm" href="/scholarships" data-ph-capture-attribute-cta="scholarships" data-ph-capture-attribute-cta-loc="catalog">Apply</a>
<a class="hs-button hs-button--secondary hs-button--sm" href="/benefits/career-insider" data-ph-capture-attribute-cta="benefit" data-ph-capture-attribute-cta-loc="catalog">View benefit</a>

Full width

.hs-button--block fills its column and keeps the label centred. For the one submit button of a narrow form. Decided in round 4.

<button class="hs-button hs-button--block" type="submit" data-ph-capture-attribute-cta="sign-in" data-ph-capture-attribute-cta-loc="sign-in">Sign in</button>

Disabled

Use the native disabled on a button. On a link, use aria-disabled="true" and remove the href.

<button class="hs-button" type="submit" disabled>Save changes</button>

Action row

One button, then at most one text link. Below 576px the button is full width and the link sits under it, centred.

<div class="hs-actions">
  <a class="hs-button" href="/join" data-ph-capture-attribute-cta="join" data-ph-capture-attribute-cta-loc="hero">Start Free Membership</a>
  <a class="hs-link" href="/user/login" data-ph-capture-attribute-cta="sign-in" data-ph-capture-attribute-cta-loc="hero">Member sign in</a>
</div>