Buttons

Scene reveal button

A button whose label plate slides up on hover to uncover a small weather scene of drifting clouds, rising hills, a turning sun and scattered flakes.

Using Scene reveal button

A button whose label plate slides up on hover to uncover a small weather scene of drifting clouds, rising hills, a turning sun and scattered flakes.

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: accent, label, flakes, width, spinSpeed

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

1848Center out fill buttonButtonsAn outlined uppercase button whose accent fill opens from a hairline at the center out to both edges on hover or focus.

2622Disc to Pill CTAButtonsA small filled disc beside a bare uppercase label stretches into a full pill on hover or focus, revealing the text and carrying the arrow along.

1633Flip face buttonButtonsA button with two faces that trades one for the other on a three dimensional turn, reversing from wherever it is when the pointer leaves.

2775Orbiting confirm chipsButtonsA round icon button that flings out a confirm chip and a dismiss chip on hover or focus, then pulls them back underneath.

2398Panel swallow buttonButtonsA button with a darker icon panel docked at one edge; on hover or keyboard focus the panel grows across the whole width and the label fades beneath it.

2591Ring reveal buttonButtonsAn oversized pill with a thick gradient ring border whose dark inner face clears on hover to expose the full colour wash, then fades back when the pointer leaves.