Animate.css Effects Grid
A grid of buttons that trigger classic Animate.css effects — bounce, shake, rubber band and more.
Requires Animate.css. Add the CDN tag below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes it.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"><div class="ac-grid">
<button class="ac-b" data-anim="bounce">Bounce</button>
<button class="ac-b" data-anim="shakeX">Shake</button>
<button class="ac-b" data-anim="rubberBand">Rubber</button>
<button class="ac-b" data-anim="tada">Tada</button>
<button class="ac-b" data-anim="flip">Flip</button>
<button class="ac-b" data-anim="heartBeat">Heart</button>
</div>body{background:#f6f7fa}
.ac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ac-b{font:600 14px/1 system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#5b6cff,#a855f7);border:0;border-radius:12px;padding:16px;cursor:pointer}document.querySelectorAll('.ac-b').forEach(function(b){
b.onclick=function(){
var a=b.dataset.anim;
b.classList.add('animate__animated','animate__'+a);
b.addEventListener('animationend',function h(){b.classList.remove('animate__animated','animate__'+a);b.removeEventListener('animationend',h)});
};
});Free to use.This component uses Animate.css (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.