Particle Hover Button

Loading code…

Installation

Loading code…

Usage

import { ParticleHoverButton } from "@/components/sora-ui/buttons/particle-hover-button";

export default function Page() {
  return (
    <ParticleHoverButton className="text-[#ff4b4b]">
      <a href="https://github.com/sponsors/Axyl1410" target="_blank" rel="noreferrer">
        Become a sponsor
      </a>
    </ParticleHoverButton>
  );
}

ParticleHoverButton is a wrapper, not a button component — it renders whatever you pass as children untouched (a real <a>, <button>, or plain text) and layers the particle emitter and hover pulse around it. Particle color always follows currentColor, so set text color on the wrapper (or on children) to recolor the effect.

Props

When to Use

A small flourish for a single high-emphasis action — a sponsor/donate link, a "like" button, a newsletter signup — where a bit of playfulness rewards hovering. Not meant for repeated use across a list of buttons; the pooled particles are cheap, but the effect loses its impact if every button on a page does it.

Accessibility

The wrapped children element keeps all of its own semantics (a real <a>/<button> stays focusable and operable exactly as authored — this component only adds a decorative, aria-hidden, pointer-events-none overlay next to it). Under prefers-reduced-motion: reduce, the particle layer isn't rendered at all and the hover pulse never starts.