CSS hiệu ứng hover button đẹp

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.

1. Mẫu hover button style 1

Mình đặt class button là button-fly




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

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.

<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>

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.