Internal preview · Button options

Hover button treatments

The signature move is a subtle vertical text roll: on hover the label slides up and out while an identical copy rises from the bottom and lands. Each option pairs it with a different arrow/pointer treatment. Hover (or tab to) any button to feel it.

Pick a favorite (1–6) and I'll make it the site's real button style.

1 · Primary glide

Light-blue primary. Text rolls; the arrow glides right. The workhorse CTA.

2 · Navy roll

Deep navy for secondary emphasis. Same roll + arrow glide.

3 · Outline fill

Quiet outline that fills with teal on hover, while the text rolls.

4 · Ghost / text link

Minimal text action. Roll + a light-blue underline that wipes in (matches the nav).

5 · Circle arrow

Arrow rides in a filled circle that deepens and nudges. Roll on the label.

6 · Dual roll

The most literal: text and arrow roll up together and re-land.

Gradients

Subtle brand-blue gradients in the same understated tone as your "Easy access" sample — same text-roll + arrow on hover. The last two show the gradient applied to text rather than a fill.

G1 · Light-blue gradient

Sunset → deep-blue, diagonal fill.

G2 · Deep steel

Teal → navy. The closest match to your "Easy access" tone, as a fill.

G3 · Teal gradient

Eucalyptus → denim. A fresher, cooler option.

G4 · Living sheen

A cooler three-stop blue gradient (sunset → eucalyptus → deep-blue).

G5 · Gradient border

Gradient outline on white. Quiet but distinctive.

G6 · Gradient text link

Transparent button with the gradient clipped onto the label — for text actions.

Easy access to a spotless car, seven days a week.

Gradient text in headings

The same slight blue gradient applied to key words in a heading — exactly like your "Easy access" sample. Great for emphasizing a phrase without using a second color.

On a dark surface

How the primary reads over navy (e.g. in the hero).

Outline on dark

Ghost/outline variant for dark hero backgrounds.