Liquid Button
A button with a liquid gooey effect on hover.
Installation
pnpm dlx rareui add liquid-button
Usage
1
Import the component
import LiquidButton from '@/components/rareui/LiquidButton';
2
Use in your application
export default function App() {
return (
<LiquidButton text="Hover me" />
);
}
Features
Realistic dripping effect using SVG filters and Framer Motion.
Examples
Examples
1
Custom Colors
<LiquidButton
text="Click me"
backgroundColor="bg-blue-500"
textColor="text-white"
/>
2
Continuous Dripping
<LiquidButton
text="Always Dripping"
isDripping={true}
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Hover me | The text to display inside the button. |
className | string | - | Additional CSS classes for the container. |
backgroundColor | string | bg-black dark:bg-white | Tailwind class for the background color. |
textColor | string | text-white dark:text-black | Tailwind class for the text color. |
isDripping | boolean | false | If true, liquid drops will continuously animate without needing hover. |