24 эффекта анимации кнопок при наведении в Gridbox

/* Базовый сброс и изоляция контейнера кнопки */.ba-item-button a { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; z-index: 1; transition: all 0.35s ease; vertical-align: middle;}.ba-item-button a span { position: relative; z-index: 2; transition: all 0.35s ease; pointer-events: none;}

document.addEventListener('DOMContentLoaded', () => { const animButtons = document.querySelectorAll('.ba-item-button[class*="button-hover-"] a'); animButtons.forEach(btn => { const text = btn.innerText.trim(); btn.setAttribute('data-text', text); });});

button-hover-1

/* 1. Slide Left */.button-hover-1 a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); transform: translateX(-100%); transition: transform 0.35s ease; z-index: 1;}.button-hover-1 a:hover::before { transform: translateX(0);}/* 2. Slide Right */.button-hover-2 a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 0.35s ease; z-index: 1;}.button-hover-2 a:hover::before { transform: translateX(0);}/* 3. Slide Up */.button-hover-3 a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); transform: translateY(100%); transition: transform 0.35s ease; z-index: 1;}.button-hover-3 a:hover::before { transform: translateY(0);}/* 4. Slide Down */.button-hover-4 a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); transform: translateY(-100%); transition: transform 0.35s ease; z-index: 1;}.button-hover-4 a:hover::before { transform: translateY(0);}/* 5. Shimmer (Блик / Перелив) */.button-hover-5 a::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-25deg); transition: 0.6s; z-index: 1;}.button-hover-5 a:hover::before { left: 150%;}/* 6. Expand Center */.button-hover-6 a::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(0, 0, 0, 0.15); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease; z-index: 1;}.button-hover-6 a:hover::before { width: 300%; height: 300%;}/* 7. Double Shutter (Двойная шторка по горизонтали) */.button-hover-7 a::before,.button-hover-7 a::after { content: ''; position: absolute; top: 0; width: 50%; height: 100%; background: rgba(0, 0, 0, 0.15); transition: transform 0.35s ease; z-index: 1;}.button-hover-7 a::before { left: 0; transform: scaleX(0); transform-origin: left; }.button-hover-7 a::after { right: 0; transform: scaleX(0); transform-origin: right; }.button-hover-7 a:hover::before,.button-hover-7 a:hover::after { transform: scaleX(1);}/* 8. Double Shutter Vertical (Двойная шторка по вертикали) */.button-hover-8 a::before,.button-hover-8 a::after { content: ''; position: absolute; left: 0; width: 100%; height: 50%; background: rgba(0, 0, 0, 0.15); transition: transform 0.35s ease; z-index: 1;}.button-hover-8 a::before { top: 0; transform: scaleY(0); transform-origin: top; }.button-hover-8 a::after { bottom: 0; transform: scaleY(0); transform-origin: bottom; }.button-hover-8 a:hover::before,.button-hover-8 a:hover::after { transform: scaleY(1);}/* 9. Rotate In */.button-hover-9 a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); transform: rotate(-90deg); transform-origin: bottom left; transition: transform 0.35s ease; z-index: 1;}.button-hover-9 a:hover::before { transform: rotate(0deg);}/* 10. Corner Fill */.button-hover-10 a::before { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; background: rgba(0, 0, 0, 0.15); transition: all 0.35s ease; z-index: 1;}.button-hover-10 a:hover::before { width: 100%; height: 100%;}/* 11. Text Slide Up (Смена текста вверх) */.button-hover-11 a span { display: inline-block;}.button-hover-11 a:hover span { transform: translateY(-150%); opacity: 0;}.button-hover-11 a::after { content: attr(data-text); position: absolute; top: 100%; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: top 0.35s ease; z-index: 2;}.button-hover-11 a:hover::after { top: 0;}/* 12. Text Slide Down (Смена текста вниз) */.button-hover-12 a span { display: inline-block;}.button-hover-12 a:hover span { transform: translateY(150%); opacity: 0;}.button-hover-12 a::after { content: attr(data-text); position: absolute; top: -100%; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: top 0.35s ease; z-index: 2;}.button-hover-12 a:hover::after { top: 0;}/* 13. 3D Flip X */.button-hover-13 a { perspective: 600px;}.button-hover-13 a span { display: inline-block; transition: transform 0.4s ease;}.button-hover-13 a:hover span { transform: rotateX(360deg);}/* 14. 3D Flip Y */.button-hover-14 a { perspective: 600px;}.button-hover-14 a span { display: inline-block; transition: transform 0.4s ease;}.button-hover-14 a:hover span { transform: rotateY(360deg);}/* 15. Pulse Glow */.button-hover-15 a:hover { box-shadow: 0 0 20px rgba(0, 102, 255, 0.6); transform: translateY(-2px);}/* 16. Slide Diagonal */.button-hover-16 a::before { content: ''; position: absolute; top: 0; left: 0; width: 150%; height: 100%; background: rgba(0, 0, 0, 0.15); transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -100%, 0); transform-origin: 0% 0%; transition: transform 0.4s ease; z-index: 1;}.button-hover-16 a:hover::before { transform: rotate3d(0, 0, 1, 0deg);}/* 17. Letter Spacing Expand */.button-hover-17 a span { transition: letter-spacing 0.3s ease;}.button-hover-17 a:hover span { letter-spacing: 3px;}/* 18. Scale Up */.button-hover-18 a:hover { transform: scale(1.06);}/* 19. Scale Down */.button-hover-19 a:hover { transform: scale(0.94);}/* 20. Skew Shift */.button-hover-20 a:hover { transform: skewX(-10deg);}/* 21. Border Draw Clockwise */.button-hover-21 a::before { content: ''; position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, 0.8); transform: scale(0); transition: transform 0.35s ease; z-index: 1;}.button-hover-21 a:hover::before { transform: scale(1);}/* 22. Invert Fill */.button-hover-22 a:hover { filter: invert(1);}/* 23. Top-Bottom Line Draw */.button-hover-23 a::before,.button-hover-23 a::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: #ffffff; transform: scaleX(0); transition: transform 0.35s ease; z-index: 2;}.button-hover-23 a::before { top: 0; }.button-hover-23 a::after { bottom: 0; }.button-hover-23 a:hover::before,.button-hover-23 a:hover::after { transform: scaleX(1);}/* 24. Jelly Wobble */.button-hover-24 a:hover { animation: jellyWobble 0.6s both;}@keyframes jellyWobble { 0% { transform: scale(1, 1); } 30% { transform: scale(1.25, 0.75); } 40% { transform: scale(0.75, 1.25); } 50% { transform: scale(1.15, 0.85); } 65% { transform: scale(0.95, 1.05); } 75% { transform: scale(1.05, 0.95); } 100% { transform: scale(1, 1); }}