Buttons

Drifting Gradient Button

A button whose diagonal two-tone fill is oversized and never stops sliding, running faster while hovered and squashing on click.

Using Drifting Gradient Button

A button whose diagonal two-tone fill is oversized and never stops sliding, running faster while hovered and squashing on click.

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, companion, driftSeconds, pressScale

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

1745Shifting gradient pillButtonsA capsule button painted with an oversized diagonal ramp that slides across the face when engaged, while two corner glows swap between a light and a deep tint of the same hue.

2572Snap back icon buttonButtonsA bare glyph button that grows smoothly under the pointer and snaps back to its resting size the instant it is pressed.

1654Spring press buttonButtonsA plain button that grows a little under the pointer and dips while held, both on a short spring, with the two scales and the spring stiffness exposed as knobs.

2578Swelling pill buttonButtonsA one-hue gradient pill that swells larger on hover while a tinted shadow spreads beneath it, and compresses briefly when pressed.

2693Tilt pop buttonButtonsA small solid button that pops larger and cocks a couple of degrees to one side on hover, then flattens back into the surface when pressed.

2707Amber upload pillButtonsA warm gradient upload pill with a bright rim that widens its coloured cast and lights the label from behind on hover.