Free CSS Animations
for
Buttons Cards Elementor Page builders

Enhance your web designs with these free easy to use CSS animations.

Button Animation

Box Shadow Animation

On hover, the button box shadow animates.

Styling the button widget

Copied!

.button-box-shadow { box-shadow: none; transition: box-shadow 0.3s ease; border-radius: 30px; }

.button-box-shadow:hover { box-shadow: 8px 8px 0px 0px #3C3C3C; border-radius: 30px; }

Button Animation

Box Gradient Animation

On hover, the button gradient is animated.

Styling the button widget

Copied!

.button-gradient-animation { background: linear-gradient(45deg, #ff6b6b, #f8e71c, #7ed321); background-size: 300%; border: none; border-radius: 30px; color: white; cursor: pointer; transition: background-position 0.5s, box-shadow 0.5s; }

.button-gradient-animation:hover { background-position: right; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }

Button Animation

Lux Button Gradient Animation

On hover, the button gradient is animated.

Styling the button widget

Copied!

CSS: /* CSS for the button hover gradient animation */ .unique-gradient-hover::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); transition: all 0.4s; transform: translateX(-100%); z-index: 1; pointer-events: none; /* Ensure the pseudo-element doesn't interfere with button clicks */ }
.unique-gradient-hover:hover::before { transform: translateX(0); }
/* Make sure the button text remains above the pseudo-element */ .unique-gradient-hover { position: relative; overflow: hidden; }

Button Animation

Confetti Button Animation

On hover, confetti explodes from the button.

Styling the button widget

Copied!

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; });

Button Animation

All Borders Button Animation

On hover, the border width is animated.

Styling the button widget

Copied!

.btn-5 { position: relative; /* Ensures .btn-5 is a positioning context */ cursor: pointer; }.btn-5:before, .btn-5:after { position: absolute; content: ""; right: 0; top: 0; background: #087E8B; transition: all 0.3s ease; }.btn-5:before { height: 0%; width: 2px; }.btn-5:after { width: 0%; height: 2px; }.btn-5:hover { background: transparent; box-shadow: none; }.btn-5:hover:before { height: 100%; }.btn-5:hover:after { width: 100%; }.btn-5 span:hover { color: #087E8B; }.btn-5 span:before, .btn-5 span:after { position: absolute; content: ""; left: 0; bottom: 0; background: #087E8B; transition: all 0.3s ease; }.btn-5 span:before { width: 2px; height: 0%; }.btn-5 span:after { width: 0%; height: 2px; }.btn-5 span:hover:before { height: 100%; }.btn-5 span:hover:after { width: 100%; }

Button Animation

Top-Bottom Border Line Button Animation

On hover, the top and bottom border width is animated.

Styling the button widget

Copied!

.btn-6 { width: 100%; height: 100%; border: none; cursor: pointer; } .btn-6:hover { color: #f0094a; background: transparent; box-shadow:none; } .btn-6:before, .btn-6:after{ content:''; position:absolute; top:0; right:0; height:2px; width:0; background: #087E8B; box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003, 4px 4px 5px 0px #0002; transition:400ms ease all; } .btn-6:after{ right:inherit; top:inherit; left:0; bottom:0; } .btn-6:hover:before, .btn-6:hover:after{ width:100%; transition:800ms ease all; }

Button Animation

Box Shadow Button Animation

On hover, the button box shadow is animated.

Styling the button widget

Copied!

.btn-7 { cursor: pointer; border: none; }.btn-7:before, .btn-7:after { position: absolute; content: ""; height: 0%; width: 1px; box-shadow: -1px -1px 20px 0px rgba(255,255,255,1), -4px -4px 5px 0px rgba(255,255,255,1), 7px 7px 20px 0px rgba(0,0,0,.4), 4px 4px 5px 0px rgba(0,0,0,.3); } .btn-7:before { right: 0; top: 0; transition: all 500ms ease; } .btn-7:after { left: 0; bottom: 0; transition: all 500ms ease; } .btn-7:hover{ background: transparent; color: #76aef1; box-shadow: none; } .btn-7:hover:before { transition: all 500ms ease; height: 100%; } .btn-7:hover:after { transition: all 500ms ease; height: 100%; } .btn-7 span:before, .btn-7 span:after { position: absolute; content: ""; box-shadow: -1px -1px 20px 0px rgba(255,255,255,1), -4px -4px 5px 0px rgba(255,255,255,1), 7px 7px 20px 0px rgba(0,0,0,.4), 4px 4px 5px 0px rgba(0,0,0,.3); } .btn-7 span:before { left: 0; top: 0; width: 0%; height: .5px; transition: all 500ms ease; } .btn-7 span:after { right: 0; bottom: 0; width: 0%; height: .5px; transition: all 500ms ease; } .btn-7 span:hover:before { width: 100%; } .btn-7 span:hover:after { width: 100%; }

Card Animation

Card Glassmorphism Effect

On hover, the card container turns into glass.

Styling the card container

Copied!

.card-1 { backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); background-color: rgba(231, 251, 254, 0); /* Initial state with no background color */ transition: all 0.6s ease; /* Add transition for smooth animation */ }.card-1:hover { backdrop-filter: blur(12px) saturate(200%); -webkit-backdrop-filter: blur(12px) saturate(200%); background-color: rgba(231, 251, 254, 1); /* Hover state with desired background color */ }

Cool CSS animations to add to your designs.

This is a library of cool CSS animations that you can freely use in your web design projects. These were mainly created for the Elementor specific use case, but can be applied to any other page builder as well. All you have to do is copy & paste.

Easily add them to your page builder of choice.

It is as simple as copying the code provided above and pasting it into your button or container widget. Just be sure to add the appropriate CSS class associated with each animation.

*Note: some widgets may require specific styling for the animations to work properly. This is indicated for each.*

Add creative flair to your landing pages.

Using these CSS animations will help you add a creative and unique flair to your design elements. These CSS animations are great for creating unique and attention grabbing calls to action and landing pages overall.