Fieldbook
Sign in

Buttons

Frame draw button

A filled button that drains its fill away on hover while four thin bars race out from opposite corners to draw a complete frame, then everything returns on leave.

Using Frame draw button

A filled button that drains its fill away on hover while four thin bars race out from opposite corners to draw a complete frame, then everything returns on leave.

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, barWidth, speed, radius

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

Corner bracket seal button
2644Corner bracket seal buttonButtonsTwo short corner brackets grow along the edges until they seal into a complete frame around the label on hover.
Corner bracket frame button
2596Corner bracket frame buttonButtonsA bare uppercase label that gets boxed in by two L-shaped brackets sliding in from opposite sides and then growing to close the frame.
Sealing frame button
2615Sealing frame buttonButtonsA square outlined call to action whose border sits broken by three gaps at rest; hovering seals the frame shut as the fill inverts.
Amber upload pill
2707Amber upload pillButtonsA warm gradient upload pill with a bright rim that widens its coloured cast and lights the label from behind on hover.
Bevel frame button
2674Bevel frame buttonButtonsA square framed button whose two ends bevel into points on hover, turning the rectangle into a six sided badge.
Border trace button
2709Border trace buttonButtonsA quiet translucent button whose four edges draw themselves in sequence on hover while a soft band of light crosses the face.