Hướng dẫn thiết kế nút Social Share đẹp mắt

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

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

1 MEGA [megacode]huong-dan-thiet-ke-nut-social-share.rar (1.01 KB)
Phí tải ~ 2,000 đ

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-thiet-ke-nut-social-share.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

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.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

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

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 đã.

<div id="content">
  <input type="checkbox" class="checkbox" id="share" checked>
  <label for="share" class="label entypo-export"></label>
  <div class="social">
    <ul>
      <li class="entypo-twitter"></li>
      <li class="entypo-facebook"></li>
      <li class="entypo-gplus"></li>
    </ul>
  </div>
</div>

Bước 2

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

@import url(http://weloveiconfonts.com/api/?family=entypo);
 
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

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

html {
  margin:0;
  padding:50px 0;
  background:#231733;
}
 
#content {
  text-align:center;
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  padding:120px 0 10px 0;
  width:200px;
  height:20px;
}

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à

input[type="checkbox"]{display:none;}
 
.checkbox:checked + .label{
  background:#7B7484;
  color:#231733;
}
 
.checkbox:checked ~ .social {
  opacity:1;
  -webkit-transform: scale(1) translateY(-90px);
  -moz-transform:scale(1) translateY(-90px);
  -o-transform:scale(1) translateY(-90px);
  transform:scale(1) translateY(-90px);
    -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}
.label {
  font-size:16px;
  cursor:pointer;
  margin:0;
  padding:5px 10px;
  
  border-radius:10%;
  color:#7B7484;
}

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

.social {
  transform-origin:50% 0%;
  
  -webkit-transform: scale(0) translateY(-190px);
  -moz-transform:scale(0) translateY(-190px);
  -o-transform:scale(0) translateY(-190px);
  transform:scale(0) translateY(-190px);
  
  opacity:0;
}
ul {
  position:relative;
  left:0;
  right:0;
  margin:auto;
  color:#fff;
  height:46px;
  width:180px;
  background:#3B5998;
  padding:0;
  list-style:none;
}
 
ul li {
  font-size:20px;
  
  cursor:pointer;
  width:60px;
  margin:0;
  padding:12px 0;
  text-align:center;
  float:left;
  display:block;
  height:22px;}
 
ul li:hover {color:rgba(0,0,0,.5);}
 
ul:after {
  content:'';
  display:block;
  position:absolute;
  left:0;
  right:0;
  margin:35px auto;
  height:0;
  width:0;
  border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    
    border-top: 20px solid #3B5998;
}
 
li[class*="twitter"] {background:#6CDFEA;padding:12px 0;}
li[class*="gplus"] {background:#E34429;padding:12px 0;}

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

Hướng dẫn thiết kế nút Social Share đẹp mắt

Hướng dẫn thiết kế nút Social Share đẹp mắt Đăng ngày 16-09-2014  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. 5/10 1365

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