Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Tạo button động bằng css đẹp mắt
Tạo button động bằng css đẹp mắt
Nguyễn Trung Hiếu
Share Code Web Company 2013

Tạo button động bằng css đẹp mắt

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é)
button đẹp

Bước 1: HTML

Mã HTML của chúng ta đơn giản lắm, chỉ có thế này thôi

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é

Đ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

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à

Khi hover chuột qua button thì sẽ có hiệu ứng, ta thêm 1 đoạn sau

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

Cuối cùng là thay đổi màu sắc các button nhìn cho đẹp cái chứ nhỉ

Vậy là xong rồi đó, chúc các bạn có một project đẹp với button của mình

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 6.128 hits
%d bloggers like this: