Particle Brust

abhishek001
Jan 25, 2026 3
Live Preview

Live Editor

  <div class="container">
        <button class="btn-particle">
            <span>Click Me</span>
        </button>
    </div>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background: #1a1a2e;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-particle {
    position: relative;
    padding: 1.5rem 3.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: visible;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.btn-particle:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}

.btn-particle:active {
    transform: scale(0.95);
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    animation: burst 1s ease-out forwards;
}

@keyframes burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}
  const btn = document.querySelector('.btn-particle');
        
        btn.addEventListener('click', function(e) {
            const rect = this.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            for(let i = 0; i < 20; i++) {
                const particle = document.createElement('span');
                particle.classList.add('particle');
                
                const angle = (Math.PI * 2 * i) / 20;
                const velocity = 100 + Math.random() * 50;
                
                particle.style.left = x + 'px';
                particle.style.top = y + 'px';
                particle.style.setProperty('--tx', Math.cos(angle) * velocity + 'px');
                particle.style.setProperty('--ty', Math.sin(angle) * velocity + 'px');
                
                this.appendChild(particle);
                
                setTimeout(() => particle.remove(), 1000);
            }
        });
Categories

Particle Brust

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
