Free animated buttons for React
Animated React buttons and compact interactions with keyboard focus parity, restrained motion and production-ready semantics. Every example works with Next.js and Tailwind, and the source installs directly into your project.
6 components
ButtonsCSS/ReactpointerEither themeBorder Beam ButtonFree animated border button for React: a light beam orbits the pill's edge via a masked conic gradient. Pure CSS, pauses under reduced motion.View component ButtonsMotionpointerEither themeIcon Morph ButtonFree animated icon button for Next.js and React: label and arrow swap with a spring on hover and focus, zero layout shift, reduced motion safe.View component ButtonsCSS/ReactpointerEither themeLiquid ButtonFree liquid fill button for Next.js and React: the CTA fills from the bottom on hover and focus, pure CSS, AA contrast, reduced motion safe.View component ButtonsMotionpointerEither themeMagnetic ButtonFree magnetic button for React: the pill leans toward your cursor, its label leans a touch further, and everything springs home on leave.View component ButtonsMotionpointerEither themeMorph State ButtonFree React submit button that morphs through idle, loading and success states — width animates, spinner spins, check draws in. Announced to AT.View component ButtonsCSS/ReactpointerEither themeShine ButtonFree shine button for Next.js and React: a diagonal sheen sweeps across the CTA on hover and keyboard focus, pure CSS and reduced-motion safe.View component