Bouton Particles

<button class="particle-button" id="particle-btn">
  ✨ Bouton Particles
</button>

.particle-button {
  position: relative;
  padding: 20px 40px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3),
              0 6px 20px rgba(118, 75, 162, 0.2);
}

.particle-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.particle-button:hover::before {
  left: 100%;
}

.particle-button:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4),
              0 12px 25px rgba(118, 75, 162, 0.3),
              0 0 0 0 rgba(102, 126, 234, 0.7);
  animation: pulse-ring 1.5s infinite;
}

.particle-button:active {
  transform: translateY(-2px) scale(1.02);
  animation: click-ripple 0.6s ease-out;
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4),
                0 12px 25px rgba(118, 75, 162, 0.3),
                0 0 0 0 rgba(102, 126, 234, 0.7);
  }
  70% {
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4),
                0 12px 25px rgba(118, 75, 162, 0.3),
                0 0 0 20px rgba(102, 126, 234, 0);
  }
  100% {
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4),
                0 12px 25px rgba(118, 75, 162, 0.3),
                0 0 0 0 rgba(102, 126, 234, 0);
  }
}

@keyframes click-ripple {
  0% {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4),
                0 12px 25px rgba(118, 75, 162, 0.3);
  }
  50% {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 25px 45px rgba(102, 126, 234, 0.6),
                0 15px 30px rgba(118, 75, 162, 0.4);
  }
  100% {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4),
                0 12px 25px rgba(118, 75, 162, 0.3);
  }
}

// Créer des particules au clic
function createParticles(event) {
  const button = event.currentTarget;
  const rect = button.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;

  // Créer 15 particules
  for (let i = 0; i < 15; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    
    // Taille aléatoire
    const size = Math.random() * 8 + 4;
    particle.style.width = size + 'px';
    particle.style.height = size + 'px';
    
    // Position de départ (centre du bouton)
    particle.style.left = centerX + 'px';
    particle.style.top = centerY + 'px';
    
    // Direction aléatoire
    const angle = (Math.PI * 2 * i) / 15;
    const velocity = Math.random() * 100 + 50;
    const dx = Math.cos(angle) * velocity;
    const dy = Math.sin(angle) * velocity;
    
    particle.style.setProperty('--dx', dx + 'px');
    particle.style.setProperty('--dy', dy + 'px');
    
    document.body.appendChild(particle);
    
    // Supprimer la particule après l'animation
    setTimeout(() => {
      if (particle.parentNode) {
        particle.parentNode.removeChild(particle);
      }
    }, 1000);
  }
  
  // Ajouter la classe pour l'animation du bouton
  button.classList.add('clicked');
  setTimeout(() => button.classList.remove('clicked'), 800);
}

// Ajouter l'événement au bouton
document.getElementById('particle-btn').addEventListener('click', createParticles);