Tạo Hiệu ứng Nút Lắc Bằng CSS - MangBinhDinh.Vn

Trang chủ » Hiệu ứng Rung Lắc Css » Tạo Hiệu ứng Nút Lắc Bằng CSS - MangBinhDinh.Vn

Có thể bạn quan tâm

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:

CSS .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); } }
123456789101112131415161718192021222324.btn-shake:hover {animation:shake0.82scubic-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 -

Từ khóa » Hiệu ứng Rung Lắc Css