Particles Button
A button with a particles animation.
Made by lucasimport ParticlesButton from "@/components/targetblank/buttons/particles";
import { StarIcon } from "lucide-react";
import { motion } from "motion/react";
import * as React from "react";
export const ParticlesButtonDemo = () => {
const [isFilled, setIsFilled] = React.useState(false);
return (
<ParticlesButton
as={motion.button}
className="gap-2 p-2 bg-transparent rounded-md border border-muted text-primary w-fit"
count={10}
color="#5a5a5a"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => setIsFilled((prev) => !prev)}
>
<StarIcon className="size-4" fill={isFilled ? "none" : "currentColor"} />
Click me
</ParticlesButton>
);
};Installation
Install the following dependencies:
Copy and paste the following code into your project:
import ParticlesBackground from "@/components/targetblank/backgrounds/particles";
import { cn } from "@/lib/utils";
const DEFAULT_COMPONENT = "button";
type ParticlesButtonProps<
T extends React.ElementType = typeof DEFAULT_COMPONENT,
> = {
as?: T;
color?: string;
count?: number;
} & React.ComponentProps<T>;
const ParticlesButton = <
T extends React.ElementType = typeof DEFAULT_COMPONENT,
>({
as,
className,
color = "white",
count = 18,
...props
}: ParticlesButtonProps<T>) => {
const Comp = as || DEFAULT_COMPONENT;
return (
<Comp
className={cn(
"flex overflow-hidden relative z-10 items-center w-full h-full text-sm text-center text-gray-700 shadow-[inset_0px_0px_2px_0px_#FFFFFF]",
className,
)}
{...props}
>
<ParticlesBackground color={color} count={count} />
{props.children}
</Comp>
);
};
export default ParticlesButton;Update the import paths to match your project setup.
Usage
<ParticlesButton>Hello world!</ParticlesButton>Props
| Prop | Type | Default |
|---|---|---|
as? | React.ElementType | button |
count? | number | 18 |
color? | string | white |