ComponentsWater Fill Button

Water Fill Button

A button that fills up like water from the bottom to the top on hover using Framer Motion.

Motion powered

Installation

Use the CLI for the fastest setup, or copy the file manually.

Run this command in your project root. The CLI will create components/ui/WaterFillButton.tsx and write the file automatically.

Terminal

$ npx @nehal712521/inprogress add water-fill-button

✔ Fetching from registry…

✔ Created components/ui/WaterFillButton.tsx

✔ Done!

pnpmpnpm dlx @nehal712521/inprogress add water-fill-button
npmnpx @nehal712521/inprogress add water-fill-button
bunbunx @nehal712521/inprogress add water-fill-button

Preview

Hover the button to see the water fill animation from bottom to top.

Usage

import { WaterFillButton } from "@/components/ui/WaterFillButton";

export default function Example() {
  return (
    <div className="flex gap-4 flex-wrap">
      <WaterFillButton>Hover me</WaterFillButton>
      <WaterFillButton size="lg">Primary action</WaterFillButton>
    </div>
  );
}