Fieldbook
Sign in

Buttons

Lifting hard shadow pill

A 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.

Using Lifting hard shadow pill

A 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.

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, restShadow, hoverShadow, radius, outline

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.
Ghost echo lift button
2606Ghost echo lift buttonButtonsA pill that lifts on hover while a ghost copy of itself swells outward behind it and dissolves.
Hairline lift pill
2609Hairline lift pillButtonsA quiet translucent pill with an inner hairline edge that lifts off the surface and picks up an accent tint on hover.
Ink bloom button
2662Ink bloom buttonButtonsA heavy outlined button whose translucent tint is overtaken by a solid disc of accent that blooms out from the center on hover or keyboard focus.
Invert and lift button
2700Invert and lift buttonButtonsA tall outlined button that inverts to a solid fill and lifts a couple of pixels on hover, then settles flat again when pressed.