Ripple Button

buttons

Interactive button with expanding radial click ripple effect animation.

#button#ripple#animation#click

Live Interactive Preview

Component Source Code

Select language in the dropdown

RippleButton.tsx

1'use client';
2
3import React, { useState } from 'react';
4
5export default function RippleButton() {
6  const [ripples, setRipples] = useState<{ x: number; y: number; id: number }[]>([]);
7
8  const addRipple = (e: React.MouseEvent<HTMLButtonElement>) => {
9    const rect = e.currentTarget.getBoundingClientRect();
10    const x = e.clientX - rect.left;
11    const y = e.clientY - rect.top;
12    const newRipple = { x, y, id: Date.now() };
13    setRipples((prev) => [...prev, newRipple]);
14    setTimeout(() => {
15      setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
16    }, 600);
17  };
18
19  return (
20    <button
21      onClick={addRipple}
22      className="relative overflow-hidden rounded-xl bg-violet-600 hover:bg-violet-700 px-6 sm:px-7 py-2.5 sm:py-3 text-sm font-semibold text-white shadow-md transition-all active:scale-95"
23    >
24      <span className="relative z-10">Click Ripple</span>
25      {ripples.map((ripple) => (
26        <span
27          key={ripple.id}
28          style={{
29            top: ripple.y,
30            left: ripple.x,
31            transform: 'translate(-50%, -50%) scale(0)'
32          }}
33          className="absolute h-24 w-24 rounded-full bg-white/40 animate-[ping_0.6s_ease-out_forwards] pointer-events-none"
34        />
35      ))}
36    </button>
37  );
38}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/buttons/RippleButton.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import RippleButton from '@/components/buttons/RippleButton';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <RippleButton />
7    </main>
8  );
9}