Liquid Button

A button with liquid morphing animations.

Preview Size:

Viewing in Desktop size (1200px × 800px)View Full Size

Usage Instructions

Installation

Copy the component code and paste it into your project. Make sure you have the required dependencies installed.

bash

npm install framer-motion lucide-react

Basic Usage

Import and use the component in your React application:

tsx

import { LiquidButton } from '@/components/liquid-button';

export default function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <LiquidButton />
    </div>
  );
}

Customization

This component accepts various props for customization. Check the component code to see all available props and their types.

Component Info

Framework

React + Next.js

Styling

Tailwind CSSCSS

Dependencies

framer-motionlucide-react

Quick Actions

Full Preview

Related Components

Neon Button

A button with a neon glow effect that pulses on hover....

Glitter Button

A button with sparkling glitter animation effect....

Shimmer Button

A button with a shimmering effect that animates continuously...

Browse All Components