Each option in its real card context. Left column is at rest,
right column has the hover state forced on with .is-hover, which
mirrors every :hover rule — so one screenshot shows both. Tokens
are copied from index.html, so nothing here invents a value.
A
Current — arrow in a ring
The control. Ring fills to --ink-2, arrow nudges 3px,
label and its underline darken. The 44px ring carries the touch target alone.
rest
ViewRyt — a redesign for 3× conversion
A D2C supplement landing page was losing money on ads. I rebuilt it with identical copy.
Ring dropped. The underline is a drawn line that grows from the
left on hover instead of a static border, so the motion is the affordance.
Quietest option; keeps the eye on the headline.
rest
ViewRyt — a redesign for 3× conversion
A D2C supplement landing page was losing money on ads. I rebuilt it with identical copy.
Reuses .cta a verbatim, so the site would have exactly
one button shape. Loudest: three filled pills stacked down the work section
start competing with the closing CTA, which is meant to be the only one.
rest
ViewRyt — a redesign for 3× conversion
A D2C supplement landing page was losing money on ads. I rebuilt it with identical copy.
The link demotes to a mono caption and the card takes the
affordance — it lifts on hover. Biggest hit area by far, and it matches the
tile behaviour in the closing grid. Costs the explicit button.
rest
ViewRyt — a redesign for 3× conversion
A D2C supplement landing page was losing money on ads. I rebuilt it with identical copy.
The link spans the measure as a rule with the arrow parked at
the far end; on hover the rule goes to ink and the arrow runs. Reads as
"continue" rather than as a button, and it gives the card a baseline.
rest
ViewRyt — a redesign for 3× conversion
A D2C supplement landing page was losing money on ads. I rebuilt it with identical copy.