Buttons

Center out underline link

A navigation link whose underline grows outward from the middle to both ends on hover and retracts back to a point when the pointer leaves.

Using Center out underline link

A navigation link whose underline grows outward from the middle to both ends on hover and retracts back to a point when the pointer leaves.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: label, accent, thickness, offset, duration

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2508Caret tail linkButtonsA quiet text link with a small angle bracket riding just past its last letter, which slides outward and gains an underline on hover.

2526Trailing arrows text buttonButtonsA borderless text link that widens its letter spacing on hover while a trail of arrows fans out to the right, each one further and fainter than the last.

2729Underline sweep linkButtonsA bare text button whose rule grows from the left on hover and retreats to the right on exit, with a long arrow that stretches forward.

2632Nudging chevron buttonButtonsA quiet accent-tinted button whose chevron mark waits in negative space, then slides in on hover and shoves the label sideways while the palette cools to neutrals.

2537Opposing rule text buttonButtonsA borderless uppercase text button bracketed by two rules that sweep in from opposite ends on hover or focus and retreat the way they came.

2413Reversing bars menu buttonButtonsA small square menu tile whose three stacked bars trade widths on hover while the tile itself cross fades from one fill color to another.