Bolt Buttons

Hover over buttons to see interaction states

Primary Buttons

Lightning Yellow background, bold and unmistakable. The hero button.

Large Primary

Hover: Inverts to black background with yellow text + lift

Standard Primary

Default CTA size

Small Primary

Compact version

Secondary Buttons

Outlined style for secondary actions. Less prominent but still clear.

Outlined Secondary

Hover: Fills with black, yellow text

Ghost Button

Hover: Yellow background appears

Minimal Button

Hover: Transforms to yellow

Inverted (Dark Backgrounds)

For use on Bolt Black backgrounds.

Inverted Primary

Hover: Lightens to white with glow

Inverted Secondary

Hover: Fills with yellow

Inverted Ghost

Hover: Yellow background

Text Links

Minimal interactive text for inline links and tertiary actions.

Underline on Hover

View documentation

Hover: Yellow underline animates in

Arrow Link

Read the story

Hover: Arrow moves right

Icon Buttons

Buttons with iconography for added visual interest.

Icon + Text

Hover: Icon slides right, inverts colors

Arrow Icon

Directional action

Experimental / Bold Options

More expressive button styles for high-impact moments.

Pill Button

Hover: Scales up with shadow

Bold / Hero

Hover: Dramatic lift with bounce easing

Split Button

Hover: Colors swap

Implementation Notes

Key CSS properties for Bolt buttons:

• border-radius: 5px for standard corners
• padding: 16px 40px for standard size
• font-weight: 700 for primary, 600 for secondary
• transition: all 0.2s ease for smooth interactions
• transform: translateY(-2px) on hover for lift effect
• box-shadow optional on hover for depth
• Yellow (#E1FF00) inverts to black (#11190C) on hover
• Always use Inter font family with fallbacks