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 framer-motion.
typescriptreactbuttontailwindmotion
Dependencies
Install the required packages before using this component.
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.