How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Pill: a circle (40px, or 32px in the small size) sits 4px inside the left edge, with a right-arrow icon in it; the uppercase label follows.
- Hover / keyboard focus: a disc behind the content grows from the circle's width to the full inner width of the pill (width transition, 0.55s, cubic-bezier(.22,1,.36,1)); the arrow moves 3px right (same timing); the label color changes in 0.4s.
- Variants: - primary — white pill (#FFFFFF), black disc, black label → white on hover. - secondary — transparent pill with a 1px black inset outline, black disc, black label → white on hover. - accent — red pill (#D71212), black disc, white label.
- Text link (ArrowLink): label + a small diagonal arrow that moves 2px right and 2px up on hover (0.35s). accent = red serif, label = uppercase black micro-label.
- On phones (≤640px) the disc is hidden and the pill becomes a simple centered button, because there's no hover.