Search blocks by description or jump to a page.
Buttons with borders that animate and trace around the edge on hover. Draw attention to a primary action without changing the button fill at rest.
Border Animation Buttons is a showcase of five button variants, laid out in a centered, wrapping row with even spacing between each one. At rest every button looks like its standard counterpart: Default, Secondary, Destructive, Outline, and Ghost. On hover a border ring scales in from just outside the button edge and fades into view, tracing the full perimeter in one smooth motion without changing the button fill or label.
The five variants are independent slots. You can drop in as many or as few as your interface needs, swap the label text, or combine two variants side by side when you want a primary and secondary action to sit together. The animation runs identically across all variants so they read as a consistent set.
Reach for this block in a project management workspace where the interface is already dense and you want a single action to stand out without adding visual noise at rest. The border trace draws attention on hover rather than at page load, so it suits toolbars, modal footers, and confirmation dialogs where the buttons should feel calm until the user is ready to act. Compared to a glow or fill effect, the border approach stays legible against both light and dark surfaces.
A natural flow around it on a Components page:
Before
After
All five standard button variants are present so you can pick the right semantic weight for each action in your layout:
Tip: place the Default and Ghost variants side by side for a confirm/cancel pair that stays visually balanced at rest and gives each action a clear hierarchy on hover.