Underline Buttons
Buttons styled with an animated underline that grows in on hover. A clean, minimal accent for text links and quiet secondary actions in any UI.
Buttons styled with an animated underline that grows in on hover. A clean, minimal accent for text links and quiet secondary actions in any UI.
Search blocks by description or jump to a page.
Underline Buttons shows five button variants side by side in a centered, wrapping row: Default, Secondary, Destructive, Outline, and Ghost. Each button carries a thin two-pixel underline that is hidden at rest and sweeps in from the left edge on hover, scaling across the full inner width of the label in a smooth transition.
Every variant is self-contained, so you can pull in only the ones that match your interface. The label text, the set of variants you keep, and the order they appear in are all straightforward to adjust without affecting the animation behavior on the others.
Reach for this block when you want quiet motion on secondary or tertiary actions in an HR or hiring platform, such as candidate profile links, navigation items in an applicant tracking sidebar, or inline form controls that sit near denser content. The sweep animation is subtle enough that it does not compete with a primary filled button, making it a good companion to bolder calls to action on the same page.
A natural flow around it on a Components page:
Before
After
The five variants cover the standard button roles, but you can trim or rearrange the set to fit your context:
Tip: pair the Ghost variant with icon-only labels in tight toolbars so the underline gives hover feedback without adding visual weight.