Bài viết sẽ hướng dẫn bạn cách tạo button động đậy đẹp mắt hơn những button bình thường chỉ với vài css đơn giản
Khi thực hiện các project của mình, thì nút button chắc chắn không thể thiếu, có rất nhiều kiểu design button đẹp ở trên mạng cho các bạn tha hồ chọn, nhưng bạn đã bao giờ thấy button cũng động đậy như ảnh động chưa? Và bạn có biết cách để tạo ra nó? Vậy thì đừng bỏ lỡ bài viết này, tôi sẽ hướng dẫn bạn làm một button như vậy rất đơn giản với vài dòng css ngắn thôi.
Xem demo cái nhỉ. do mình lưu ảnh không phải ảnh động,cho nên chỉ nhìn thấy được bề mặt tĩnh, các bạn sau khi làm xong thì cùng chiêm ngưỡng mới thấy hết được sự “tinh túy” của nó như thế nào? 😀 (hơi nhỏ nhé)
Bước 1: HTML
Mã HTML của chúng ta đơn giản lắm, chỉ có thế này thôi
|
1 2 3 4 5 6 |
<button class="btn">submit</button> <button class="btn">submit</button> <button class="btn">submit</button> <button class="btn">submit</button> <button class="btn">submit</button> <button class="btn">submit</button> |
Bước 2: Javascript
Để các bạn dễ hiểu,mình đưa mã javascript này lên làm bước 2, để không tí các bạn hỏi 1 số class trong css để làm gì nhé
|
1 2 3 4 5 6 7 8 |
(function() { $('.btn').on('click', function() { return $(this).toggleClass('loading'); }); $('.btn:odd').addClass('loading'); }).call(this); |
Đoạn javascript trên rất đơn giản, chỉ là thêm 1 class có tên “loading” vào các button theo thứ tự mà thôi.
Bước 3: CSS
Đây mới là bước quan trọng nè, nhờ có css3 mà chúng ta mới có được khả năng này đó.
Đầu tiên là khai báo keyframe cho class loading. Những button nào có class này thì sẽ có hiệu ứng chuyển động
|
1 2 3 4 5 6 7 8 9 |
@keyframes loading { 0% { background-position: 0 0; } 100% { background-position: 80px 0; } } |
Tiếp theo là định dạng cho button, trên đây chỉ là những định dạng cơ bản thôi mà
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.btn { display: inline-block; cursor: pointer; position: relative; width: 180px; height: 60px; font: bold 26px/60px Verdana, monospace, sans-serif; color: #fff; background-color: #3EA0FF; border: none; margin: 0 15px 15px 0; transition: text-shadow 0.3s ease; text-transform: uppercase; -webkit-box-shadow: 0 1px 2px #999999; -moz-box-shadow: 0 1px 2px #999999; box-shadow: 0 1px 2px #999999; } |
Khi hover chuột qua button thì sẽ có hiệu ứng, ta thêm 1 đoạn sau
|
1 2 3 4 |
.btn:hover, .btn.loading { text-shadow: 0 1px 0 #333; } |
Đoạn quan trọng nhất,đó là thiết kế css cho class loading, thực ra đoạn này chỉ là định màu nền cho button đó thôi. Do trước đó chúng ta dùng keyframe để tạo hiệu ứng chuyển động cho button nên ở đây ta tự tạo màu cho background chuyển động mờ mờ
|
1 2 3 4 5 6 7 8 9 |
.btn.loading { background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(25%, rgba(255, 255, 255, 0.2)), color-stop(25%, transparent), color-stop(50%, transparent), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(75%, rgba(255, 255, 255, 0.2)), color-stop(75%, transparent), color-stop(100%, transparent)); background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-size: 80px 80px; animation: loading 1.5s linear infinite; } |
Cuối cùng là thay đổi màu sắc các button nhìn cho đẹp cái chứ nhỉ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.btn:nth-child(2) { background-color: #FFBF41; } .btn:nth-child(3) { background-color: #EE8943; } .btn:nth-child(4) { background-color: #C02221; } .btn:nth-child(5) { background-color: #824167; } .btn:nth-child(6) { background-color: #249CA9; } |
Vậy là xong rồi đó, chúc các bạn có một project đẹp với button của mình
