Particle Buttons

Buttons

About

A set of decorative buttons that emit animated particles (bursts, confetti, sparkles, rising embers, or a pop) on hover or click, with reduced-motion support.

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

Code

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

Usage.tsx

"use client";

import {
  BurstButton,
  ConfettiButton,
  SparkleButton,
  RiseButton,
  PopButton,
} from "@/components/ui/buttons-particle";

export default function ButtonsParticleDemo() {
  return (
    <div className="flex min-h-screen w-full flex-wrap items-center justify-center gap-4 bg-background p-8">
      <BurstButton>Burst</BurstButton>
      <ConfettiButton>Confetti</ConfettiButton>
      <SparkleButton>Sparkle</SparkleButton>
      <RiseButton>Rise</RiseButton>
      <PopButton>Pop</PopButton>
    </div>
  );
}