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, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
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. Built on top of the shadcn Button so every variant and size you already use just works—the liquid wash layers on top of any variant. 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
Pill Button
Pill with inset highlight
Gradient Button
Shifting gradient bg
Shine Button
Diagonal light sweep
Depth Button
Tactile 3D press
Magnetic Button
Cursor magnetic pull
Success Button
Success checkmark state
FAQ
Was this page helpful?
Sign in to leave feedback.
Kbd Button
Button with an inline keyboard shortcut chip rendered as a styled `<kbd>` element for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Loading Button
Button with built-in loading spinner and state management for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.