Ghost ring outline

Borderless white button with a box-shadow ring as its outline. No layout shift when toggling states. Built with Tailwind arbitrary shadow and motion.

typescriptreactbuttontailwindmotion

Dependencies

Install the required packages before using this component.

npm install motion lucide-react

Notes

Using box-shadow for the ring (0 0 0 1px) instead of border means toggling it on hover or focus adds zero layout shift - borders participate in the box model, shadows do not.

The negative spread on the second layer (0 1px 2px -1px) creates a tight shadow that hugs the bottom edge before diffusing, giving the button a natural lift without a heavy drop shadow.

This pattern scales directly to icon-only buttons: same shadow stack, square container, no text.