Free CSS Animations
for Buttons Cards Elementor Page builders

CSS: /* Initial button style */ .confetti-hover-button { position: relative; overflow: visible; /* Allow confetti to overflow outwards */ }/* Confetti style */ .confetti { position: absolute; width: 5px; height: 5px; background-color: #ff7e5f; border-radius: 50%; opacity: 1; /* Start fully opaque */ transition: transform 2s ease-out, opacity 2s ease-out; }/* Animation class for confetti */ .confetti-animate { opacity: 0; transform: translate(var(--x), var(--y)) rotate(720deg) scale(1.5); }

Java Scipt:let isConfettiTriggered = false; // Flag to track if the confetti effect is triggered// Function to create confetti elements function createConfetti(button) { const rect = button.getBoundingClientRect(); for (let i = 0; i < 50; i++) { // Increase the number of confetti pieces const confetti = document.createElement('div'); confetti.classList.add('confetti'); confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`; confetti.style.left = `${rect.width / 2}px`; confetti.style.top = `${rect.height / 2}px`;// Random direction and distance for the confetti to travel const angle = Math.random() * 2 * Math.PI; const distance = Math.random() * 200 + 100; // Explode further outwards const gravity = Math.random() * 100 + 50; // Fall with gravity effect confetti.style.setProperty('--x', `${Math.cos(angle) * distance}px`); confetti.style.setProperty('--y', `${Math.sin(angle) * distance + gravity}px`);button.appendChild(confetti);// Trigger animation setTimeout(() => { confetti.classList.add('confetti-animate'); }, 10);// Remove confetti after animation setTimeout(() => { confetti.remove(); }, 2000); } }// Attach event listener to the button const button = document.querySelector('.confetti-hover-button'); button.addEventListener('mouseenter', function() { if (!isConfettiTriggered) { createConfetti(this); isConfettiTriggered = true; } });// Reset the flag when the hover ends button.addEventListener('mouseleave', function() { isConfettiTriggered = false; });