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

Xem: 926    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 3 đánh giá ) File đã được kiểm thử


Megacode 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 Megacode 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.

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

<a href="#" class="share-btn" target="_blank">
    <span class="share-btn-action share-btn-tweet">Tweet</span>
    <span class="share-btn-count">481</span>
  </a>
Ở đâ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
<section class="container">
  <a href="#" class="share-btn" target="_blank">
    <span class="share-btn-action share-btn-tweet">Tweet</span>
    <span class="share-btn-count">481</span>
  </a>
  <a href="#" class="share-btn" target="_blank">
    <span class="share-btn-action share-btn-like">Like</span>
    <span class="share-btn-count">516</span>
  </a>
  <a href="#" class="share-btn" target="_blank">
    <span class="share-btn-action share-btn-plus">+1</span>
    <span class="share-btn-count">234</span>
  </a>
</section>

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ả.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #e9eff2;
}

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.

.container {
  margin: 80px auto;
  width: 400px;
  text-align: center;
}

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.

.share-btn {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0 20px;
  padding-top: 40px;
  width: 80px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.share-btn:active {
  margin-top: 3px;
}
.share-btn:active .share-btn-action {
  padding-bottom: 3px;
  -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.share-btn:active .share-btn-action:after {
  bottom: 3px;
}

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ả.

.share-btn-count {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 40px;
  font-size: 19px;
  letter-spacing: -1px;
  color: #555;
  text-shadow: 0 1px white;
  background: #e6eff5;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #c5c5c5 #bbb;
  border-radius: 8px 8px 0 0;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03), transparent 40%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03), transparent 40%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03), transparent 40%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), transparent 40%);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}
.share-btn-count:before, .share-btn-count:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #e6eff5;
}
.share-btn-count:before {
  margin-left: -7px;
  margin-top: 1px;
  border-width: 7px;
  border-top-color: rgba(0, 0, 0, 0.07);
}
.share-btn-action {
  display: block;
  position: relative;
  line-height: 32px;
  padding: 2px 0 6px;
  font-size: 12px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  border: solid rgba(0, 0, 0, 0.18);
  border-width: 0 1px;
  border-radius: 0 0 8px 8px;
}
.share-btn-action:before {
  content: '';
  display: inline-block;
  vertical-align: top;
  margin: 8px 2px 0 0;
  width: 18px;
  height: 18px;
  background-image: url("http://i323.photobucket.com/albums/nn460/leo85it/icons-3.png");
}
.share-btn-action:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 6px;
  left: 0;
  right: 0;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}

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

.share-btn-tweet {
  background: #83cfe8;
  background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.share-btn-tweet:before {
  margin-left: -3px;
}
.share-btn-tweet:after {
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}
.share-btn-tweet + .share-btn-count {
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}
.share-btn-tweet + .share-btn-count:before {
  border-top-color: rgba(0, 0, 0, 0.05);
}
.share-btn-like {
  background: #6480bd;
  background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
  background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
  background-image: -o-linear-gradient(top, #6480bd, #3c5894);
  background-image: linear-gradient(to bottom, #6480bd, #3c5894);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}
.share-btn-like:before {
  background-position: -18px 0;
}

.share-btn-plus {
  background: #626262;
  background-image: -webkit-linear-gradient(top, #626262, #404040);
  background-image: -moz-linear-gradient(top, #626262, #404040);
  background-image: -o-linear-gradient(top, #626262, #404040);
  background-image: linear-gradient(to bottom, #626262, #404040);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}
.share-btn-plus:before {
  display: none;
}

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ó.

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 Đăng ngày 15-09-2014  Megacode 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 Megacode 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 5/10 926

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn