Một nút bấm có hiệu ứng sẽ gây chú ý hơn cho người truy cập tăng hiệu quả chuyển đổi. Bài viết này sẽ hướng dẫn bạn cách tạo 1 nút bấm với hiệu ứng lắc.
Rất đơn giản. Đầu tiên tạo đoạn mã CSS như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .btn-shake:hover { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } |
Vậy là xong rồi đó. Giờ bạn muốn nút nào lắc thì cứ thêm lớp (class) btn-shake này vào là được.
Huỳnh Mai Anh Kiệt
- Advertisement -
