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.
Liquid Button preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the liquid-button button into my projectRelated 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
FAQ
Was this page helpful?
Sign in to leave feedback.