Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Thiết kế nút Social Share đẹp mắt
Thiết kế nút Social Share đẹp mắt
Nguyễn Trung Hiếu
Share Code Web Company 2013

Thiết kế nút Social Share đẹp mắt

Thời đại của mạng xã hội bùng nổ, nhà nhà làm website, làm blog đều hướng tới người dùng có thể share, like những nội dung mình muốn. Do vậy thiết kế nút Social Share sao cho đẹp mắt cũng góp phần thêm thu hút người dùng ghé thăm website bạn hơn.

Cũng chính vì lẽ đó, hôm nay tôi sẽ hướng dẫn các bạn thực hiện thiết kế tạo một bộ Social share gồm 3 nút cơ bản của 3 mạng gồm: Twitter, Facebook, Google+

Demo

Chiêm ngưỡng qua thành quả mình sẽ làm trông như thế nào nhé. Ở đây chúng ta không dùng ảnh, chỉ dùng CSS để cho hiệu ứng mượt, và load nhanh hơn
Thiết kế nút Social Share đẹp mắt

Bắt tay vào làm nào

Bước 1

Nói gì thì nói đầu tiên chúng ta cần có bộ khung bằng HTML trước đã.

Bước 2

Chuyển sang phần CSS, đầu tiên chúng ta import bộ font vào đã

Khung màu mè cho đẹp cái. Ở đây chúng ta đổ màu nền cho nó là mã #231733. Nội dung của thẻ div#content được canh chỉnh như dưới

Tiếp theo là ẩn cái label đi, và design lại nút check. Ở đây chúng ta để thuộc tính type=”checkbox” để nhằm mục đích khi người dùng click vào đó chúng ta sẽ lấy được sự kiện click và cho phép hiển thị ra 3 nút social ở trên. Toàn bộ đều dùng CSS3 để làm cho hiệu ứng mươt mà

Tiếp theo là đến bộ div.social

Vậy là xong rồi đó, thử chạy lên trình duyệt xem kết quả ra sao nhé.

Download code

Nếu bạn nào không làm được có thể download file sau về chạy ngay

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

  • 5.777 hits
%d bloggers like this: