║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Ripple Button date: 2024-11-17 description: An animated button with ripple useful for user engagement. author: Sidd5arth published: true

<ComponentPreview name="ripple-button-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/ripple-button

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ripple-button" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Add the required CSS animations</Step>

Add the following animations to your global CSS file.

@theme inline {
  --animate-rippling: rippling var(--duration) ease-out;

  @keyframes rippling {
    0% {
      opacity: 1;
    }
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }
}

</Steps> </TabsContent> </Tabs>

Usage

import { RippleButton } from "@/components/ui/ripple-button"

<RippleButton>Ripple Button</RippleButton>

Props

| Prop | Type | Default | Description | | ------------- | ----------------- | ------- | --------------------------------------------------------- | | children | React.ReactNode | - | The content of the button. | | className | string | - | Additional class names for the button. | | rippleColor | string | - | The rbg numbers only for the color of the rippling waves. | | duration | string | - | The time span of one ripple. |

Credits

• Credit to @Sidd5arth

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║