ParticleButton

particlebutton-1779394026103.tsx

'use client'
import { useState } from 'react'

export default function ParticleButton({ label = 'Click Me! 🎉' }) {
  const [particles, setParticles] = useState([])
  const burst = (e) => {
    const rect = e.currentTarget.getBoundingClientRect()
    const cx = e.clientX - rect.left
    const cy = e.clientY - rect.top
    const newParticles = Array.from({ length: 12 }, (_, i) => ({
      id: Date.now() + i,
      x: cx, y: cy,
      angle: (i / 12) * 360,
      color: ['#6d28d9','#2563eb','#10b981','#f59e0b','#ef4444'][i % 5],
    }))
    setParticles(p => [...p, ...newParticles])
    setTimeout(() => setParticles(p => p.filter(x => !newParticles.find(n => n.id === x.id))), 600)
  }
  return (
    <button onClick={burst} style={{
      position:'relative', overflow:'visible',
      background:'linear-gradient(135deg,#6d28d9,#2563eb)',
      color:'#fff', border:'none', borderRadius:'12px',
      padding:'14px 28px', fontSize:'16px', fontWeight:700,
      cursor:'pointer', boxShadow:'0 4px 15px rgba(109,40,217,0.4)',
    }}>
      <style>{'@keyframes fly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}'}</style>
      {label}
      {particles.map(p => (
        <div key={p.id} style={{
          position:'absolute', left:p.x, top:p.y, width:'8px', height:'8px',
          borderRadius:'50%', background:p.color, pointerEvents:'none',
          '--dx': Math.cos(p.angle * Math.PI/180) * 60 + 'px',
          '--dy': Math.sin(p.angle * Math.PI/180) * 60 + 'px',
          animation:'fly 0.6s ease-out forwards',
        }} />
      ))}
    </button>
  )
}

Component info

CategoryAnimations

Frameworkreact

TierFREE

Copies0

About

Button that emits CSS particle burst animation on click

More from Animations

'use client'
import { useState, useEffect } from 'react'

const STRINGS = ['Build faster.', 'Ship better.', 'Design smarter.', 'Scale effortlessly.']

export default function TypingAnimation({ strings = STRINGS, speed = 80, pause = 1500 }) {
  const

TypingAnimation

Animations

'use client'
export default function PulseIndicator({
  label = 'Live',
  color = '#10b981',
  size = 12,
  rings = 2,
}) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:'10px' }}>
      <div style={{ position:'relative', widt

PulseIndicator

Animations

'use client'
import { useState, useRef } from 'react'

export default function MagneticButton({ label = 'Hover me ✨', strength = 30 }) {
  const [pos, setPos] = useState({ x:0, y:0 })
  const ref = useRef(null)
  const onMove = (e) => {
    const rec

MagneticButton

Animations

'use client'
import { useState } from 'react'

function Shimmer({ w = '100%', h = '16px', r = '6px' }) {
  return (
    <div style={{
      width:w, height:h, borderRadius:r,
      background:'linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%

ShimmerCard

Animations