Buttons

Hinged plate button

Two identical label plates sit exactly on top of each other and swing apart on hover, like a pair of doors turning under perspective.

Using Hinged plate button

Two identical label plates sit exactly on top of each other and swing apart on hover, like a pair of doors turning under perspective.

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, tilt, depth, duration

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

2688Hinged progress buttonButtonsA button whose face hinges backward on hover, exposing a tray where a progress bar fills in uneven bursts and fades out at full width.

1661Two face flip buttonButtonsA button with two stacked faces that rotate past each other in 3D on hover, the front tipping away toward a chosen edge while the back swings in to take its place.

1898Tilted deck buttonButtonsA button laid back in perspective like a key on a sloped deck, tipping further away and sliding down as it is hovered and pressed.

2068Tilted perspective buttonButtonsA rounded call-to-action that sits in permanent 3D perspective and rocks toward the pointer as it crosses the plate.

2625Anaglyph wobble buttonButtonsA button that hangs in a slow 3D swing and, when hovered or focused, throws warm and cool duplicates of itself out of register with an overshooting wobble.

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.