Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Button share đẹp mang phong cách của YooThemes bằng CSS
Button share đẹp mang phong cách của YooThemes bằng CSS
Nguyễn Trung Hiếu
Share Code Web Company 2013

Button share đẹp mang phong cách của YooThemes bằng CSS

Sharecodeweb cũng đã có nhiều bài viết hướng dẫn cách làm button share, like bằng css trên blog, nhưng hình như mẫu mã và sự đa dạng vẫn chưa đủ thì phải :). Hôm nay sharecodeweb tiếp tục hướng dẫn các bạn thiết kế tiếp một mẫu button share cực đẹp nữa

Ảnh demo

Đầu tiên là ảnh demo của em nó đây, rất đẹp phải không nào. Và bài này mình sẽ hướng dẫn kỹ một chút, không nhiều bạn lại thắc mắc không biết vì sao.
button share like

HTML

Đầu tiên là khung xương HTML như mọi khi, dùng HTML5 cho nó oách =))
Ở bài này thì mình hướng dẫn các bạn design 3 button của 3 mạng xã hội lớn trên thế giới đó là twitter, facebook, và google+, bạn nào muốn thêm thì tự phát triển nhé. Cấu trúc từng button như sau

Ở đây, bạn có thể thấy bên ngoài là một thẻ a, thẻ này bạn có thể dùng để click đi đâu tùy bạn, chú ý những tên class mình đặt, để sau này còn dễ style. Tiếp theo là 2 thẻ span, 1 để định dạng cái tên Mạng xã hội, 2 là để hiển thị số lượng like share….
Do đó, mình muốn thiết kế 3 nút thì cũng tương tự, cốt là thay đổi tên class của thẻ span đầu tiên thôi. Code HTML hoàn chỉnh này

Bo bên ngoài là thẻ < section > mà, không có bạn lại hỏi HTML5 ở đâu 😀

CSS

OK,Nếu bạn dùng Firefox thì có thể cài thêm plugin Firebug vào để style trực tiếp trên trình duyệt luôn cho nó máu. Hình như chrome giờ cũng có rồi sao á :D.
Đầu tiên vẫn là reset lại một số thông số cái đã, đoạn này thì chưa có gì đặc biệt cả.

Section Style

Canh giữa và canh trên là 80px cái section bằng lệnh margin, độ rộng 400px là thoải mái rồi.

Class share-btn

Tất cả 3 nút đều có cấu trúc như nhau, cho nên ta định dạng chung cho cả 3 nút luôn, các bạn chú ý cái thuộc tính -webkit-box-shadow là để định dạng riêng cho trình duyệt chrome thì phải (nhớ mang máng =)) ). Ngoài ra, vì là “thằng cha” cho nên mình để thuộc tính position là relative. Nếu bạn nào không hiểu cái này thì có thể lên izwebz đã có video giải thích về position khá rõ cái này rồi, mình không nói lại nữa.

Class button-btn-action

Ở đây mình có dùng một cái ảnh của link bên ngoài, bạn có thể download về để phục vụ cho đoạn nho nhỏ này (chỉ là cái ảnh con chim của twitter và logo facebook thôi mà). Do “thằng cha” có thuộc tính position là relative nên thằng con mình để position là absolute để căn theo “thằng cha”. Mình đặt màu nền cho nó bằng các thuộc tính của CSS3, bạn nào muốn màu sắc đẹp hơn thì có thể lên google search ra rất nhiều website cho phép bạn generate màu bằng CSS3. Nhìn đoạn background trông rối rối chút thôi nhưng thực ra là định dạng cho từng trình duyệt khác nhau thôi. Không có gì ghê gớm cả.

Phần tiếp theo và hết

Phần tiếp theo định dạng nốt những thứ còn lại

Chốt

Nếu các bạn sử dụng plugin firebug thì có thể style từng dòng, và tự thấy được sự khác biệt của mỗi lệnh style, qua đó hiểu thêm hơn về các thuộc tính của nó.
Ngoài ra, nếu cần tham khảo một số mẫu button share khác trên sharecodeweb, bạn có thể xem dưới đây.

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

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