Fieldbook
Sign in

Buttons

Sliding send button

A flat send button that slides right on hover while the gap between its label and arrow opens, recoils a few pixels under press, and settles back on leave.

Using Sliding send button

A flat send button that slides right on hover while the gap between its label and arrow opens, recoils a few pixels under press, and settles back 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: label, accent, travel, tracking

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 code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Gap stretch arrow button
2585Gap stretch arrow buttonButtonsA fixed width pill whose trailing arrow walks to the far edge on hover, stretching the gap after a stationary label, with a faint trail copy following a beat behind.
Rising arrow link button
2416Rising arrow link buttonButtonsA read more button where the label slides sideways to open a gap and an arrow climbs into it from below the clipped bottom edge.
Arrow relay badge pill
2601Arrow relay badge pillButtonsA pill button with a round left badge whose arrow exits through the top corner on hover while a fresh one arrives from below and the body eases to near-black.
Arrow wipe button
2683Arrow wipe buttonButtonsA pill button whose accent plate, cut into an arrowhead, sweeps in from the left on hover and inverts the label letter by letter as its point crosses.
Arrow wipe call to action
1629Arrow wipe call to actionButtonsA call to action whose darker plate wipes in from the left on hover while a tucked arrow slides out to meet the label, and pushes down a pixel when clicked.
Breathing Inset Button
2579Breathing Inset ButtonButtonsA pale moulded button whose inner panel pulls away from the rim on hover while the send glyph slides a short distance toward the label.