Shadcn.io is not affiliated with official shadcn/ui
Liquid Button
Liquid fill button with fluid animation that floods from bottom on hover for React applications.
Satisfying button with a liquid fill effect that rises from the bottom on hover like water filling a container. Uses CSS background-position animation for buttery-smooth performance with no JavaScript overhead during the animation. Features multiple variants (default, outline, secondary) and sizes. Built with Motion for React for hover/tap scaling and class-variance-authority for variant management. Perfect for CTAs, form submissions, or any button that needs that extra bit of visual feedback.
Liquid Button preview
Installation
Related Components
Flip Button
3D flip reveal animation
Ripple Button
Material Design ripple effect
Magnetic Button
Particle attraction effect
Text Reveal Button
Animated text reveal on hover
Corner Accent Button
Animated corner accents
Copy Button
Clipboard copy with feedback