Hôm nay mình sẽ share 1 số hiệu ứng hover button đẹp mà mình sưu tầm được. Hi vọng với những đoạn CSS này sẽ giúp cho website của các bạn trở nên lung linh hơn.
-
Mẫu hover button style 1
Mình đặt class button là button-fly
Dat Class Button Fly
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
.button-fly { --background: #275efe; --text: #fff; --font-size: 16px; --duration: 0.44s; --move-hover: -4px; --shadow: 0 2px 8px -1px rgba(39, 94, 254, .32); --shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, .5); --font-shadow: var(--font-size); box-shadow: var(--shadow); transform: translateY(var(--y)) translateZ(0); transition: transform var(--duration) ease, box-shadow var(--duration) ease; } .button-fly div { display: inline-flex; overflow: hidden; text-shadow: 0 var(--font-shadow) 0 var(--text); justify-content: center; height: 22px; } .button-fly div span { display: block; backface-visibility: hidden; font-style: normal; transition: transform var(--duration) ease; transform: translateY(var(--m)) translateZ(0); } .button-fly div span:nth-child(1) { transition-delay: 0.05s; } .button-fly div span:nth-child(2) { transition-delay: 0.1s; } .button-fly div span:nth-child(3) { transition-delay: 0.15s; } .button-fly div span:nth-child(4) { transition-delay: 0.2s; } .button-fly div span:nth-child(5) { transition-delay: 0.25s; } .button-fly div span:nth-child(6) { transition-delay: 0.3s; } .button-fly div span:nth-child(7) { transition-delay: 0.35s; } .button-fly div span:nth-child(8) { transition-delay: 0.4s; } .button-fly div span:nth-child(9) { transition-delay: 0.45s; } .button-fly div span:nth-child(10) { transition-delay: 0.5s; } .button-fly div span:nth-child(11) { transition-delay: 0.55s; } .button-fly:hover { --y: var(--move-hover); --shadow: var(--shadow-hover); } .button-fly:hover span { --m: calc(var(--font-size) * -1); } |
Thêm một chút js nữa là ổn.
|
1 2 3 4 5 |
<script> jQuery(document).ready(function($) { document.querySelectorAll('.button-fly').forEach(button => button.innerHTML = '<div><span>' + button.textContent.trim().split('').join('</span><span>') + '</span></div>'); } ); </script> |
Chúc các bạn thành công và chúc mừng năm mới.
