Fieldbook
Sign in

Buttons

Mascot zoom play button

An outlined pill carrying a small pixel mascot that scales up and slides across on hover, pushing one word out the right side while a second word arrives from the left.

Using Mascot zoom play button

An outlined pill carrying a small pixel mascot that scales up and slides across on hover, pushing one word out the right side while a second word arrives from the left.

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: restLabel, hoverLabel, accent, zoom, staggerMs

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

Detached Ring Pill
2595Detached Ring PillButtonsA dark pill orbited by a floating outline ring that pushes further out and floods the pill with color on hover.
Draining fill button
2588Draining fill buttonButtonsAn outlined pill that starts fully flooded with colour and drains down to a slim band at the foot on hover, then refills from the bottom on leave.
Inset Edge Pill
2371Inset Edge PillButtonsA pale pill with a thin ring all round and a thicker lip along the bottom only, so it reads as a physical key that floods with color on hover.
Lift and fill pill
1713Lift and fill pillButtonsAn outlined pill that jumps a fixed distance straight up and fills solid with its accent while pointed at, then drops back on the same curve.
Lifting hard shadow pill
2663Lifting hard shadow pillButtonsA thick outlined pill that drifts up and to the left on hover while its flat solid shadow stretches out underneath it, and presses flush against the page while held.
Rim ramp button
2691Rim ramp buttonButtonsA thick coloured rim surrounds a dark inner face; on hover the face clears and the rim's colour ramp floods the whole button.