Ripple Buttons

Buttons 31

About

A set of five click-triggered button variants (ripple, echo, sonar, ping, flash) that animate a wave or ring from the pointer position, respecting reduced-motion preferences.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ripple Buttons to your project and fits it to your theme.

Code

How Ripple Buttons is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  RippleButton,
  EchoButton,
  SonarButton,
  PingButton,
  FlashButton,
} from "@/components/ui/buttons-ripple";

export default function ButtonsRippleDemo() {
  return (
    <div className="flex min-h-screen w-full flex-wrap items-center justify-center gap-4 bg-background p-8">
      <RippleButton>Ripple</RippleButton>
      <EchoButton>Echo</EchoButton>
      <SonarButton>Sonar</SonarButton>
      <PingButton>Ping</PingButton>
      <FlashButton>Flash</FlashButton>
    </div>
  );
}