Buttons

Shifting frame button

A dark tracked button framed by a few pixels of a wide two-tone ramp that slides slowly so the visible frame keeps changing tone.

Using Shifting frame button

A dark tracked button framed by a few pixels of a wide two-tone ramp that slides slowly so the visible frame keeps changing tone.

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, secondary, cycle, frameWidth

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

2764Drifting halo buttonButtonsA dark button ringed by a slightly larger halo frame in which one bright band of the accent drifts endlessly around the perimeter, brightening and lifting the plate on hover.

2659Contrast Boost Frame ButtonButtonsA pale inner plate floats inside a thick painted frame, and hovering cranks the whole thing brighter and more saturated without moving anything.

2713Drifting mesh tiltButtonsA pill held at a slight three dimensional tilt while soft blooms of light drift beneath its surface, rocking between two poses while hovered or focused.

2360Gradient flip uppercase buttonButtonsAn uppercase button filled with a two tone diagonal ramp that swaps end for end on hover, taking its tinted cast shadow along with it.

2674Bevel frame buttonButtonsA square framed button whose two ends bevel into points on hover, turning the rectangle into a six sided badge.

2709Border trace buttonButtonsA quiet translucent button whose four edges draw themselves in sequence on hover while a soft band of light crosses the face.