Follow button theo kiểu menu Metro UI

VIEW DEMO

Ở bài trước mình đã giơi thiệu một mẫu nút follow, hôm nay mình xin giới thiệu một mẫu nút follow khác lấy cảm hứng từ menu Metro UI của Windows 8.

#Các bước thực hiện

Đăng nhập Blogger > Bố cục > Thêm tiện ích > HTML/Javascrip > Dán code > Save.

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/quockhanh.bui.50 rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/Chelskivn29></a></li>
<li><a class="gp" href="https://plus.google.com/quockhanhbui2641998"></a></li>
<li><a class="pi" href=http://pinterest.com/your id rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/ your id rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/your id></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/blogkhanh98 rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Thay đổi phần màu đỏ cho phù hợp

Nguồn Tips Trik Blogging