Icon new Thông báo: Cần sang nhượng lại website vnmeovat.com cho bạn nào muốn phát triển lại website này giá liên hệ giá tốt - zalo: 0939776246

Kênh công nghê


chia-se-mang-xa-hoi-joomla

Làm thế nào để có thể tạo ra những icon chia sẽ mạng xã hội như thế này? Hôm nay Kênh công nghệ vnmeovat.com xin hướng dẫn các bạn cách tạo các icon mạng xã hội như trên.

 Khi hover vào sẽ quây icon 360 độ và bo tròn icon trông đẹp mắt..

chia-se-mang-xa-hoi-joomla-hover

Bước đầu tiên cần chuẩn bị là các icon theo ý của bạn Download Icon, sau đó viết đoạn code này vào vị trí bạn cần đặt các icon:

<div id="zt-social" style="float: right;">
<a title="twitter" href="#" class="twitter"><img class="connhonay" src="/index/tw.png"></a>
<a title="facebook" href="/https://www.facebook.com/pages/Tepreucom/1429962390569667" class="facebook"><img class="connhonay" src="/index/fa.png"></a>
<a title="youtube" href="#" class="youtube"><img class="connhonay" src="/index/you.png"></a>
<a title="Google Plus" href="/https://plus.google.com/u/0/b/118300298639824532496/" class="gplus"><img class="connhonay" src="/index/go.png"></a>
<a title="Email" href="mailto: "'; document.write(''); document.write(addy_text13830); document.write('<\/a>'); //-->\n ; class="email"><img class="connhonay" src="/index/ma.png"></a>
<a title="RSS" href="#" class="rss"><img class="connhonay" src="/index/rss.png"></a>
</div>

Sau đó viết đoạn css này vào file css của bạn.

#zt-social a
{
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
transition: all ease 0.5s;
display: inline-block;
float: left;
height: 40px;
margin: 3px;
text-align: center;
line-height: 60px;
position: relative;
overflow: hidden;
color: #fff;
font-size: 28px;
text-decoration: none;
width: 40px;
}
.connhonay
{
display: inline-block;
float: left;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 60px;
position: relative;
overflow: hidden;
color: #fff;
font-size: 28px;
text-decoration: none;
width: 40px;
}
#zt-social a:hover
{
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
#zt-social .twitter {
background-color: #5abadd;
background-position: 17px 20px;
border: 1px solid #45a4c6;
}
#zt-social .facebook {
background-color: #4370d5;
background-position: 17px -62px;
border: 1px solid #4370d5;
}
#zt-social .youtube {
background-color: #c7292e;
background-position: 17px -142px;
border: 1px solid #a8171c;
}
#zt-social .gplus {
background-color: #444444;
background-position: 17px -218px;
border: 1px solid #272727;
}
#zt-social .email {
background-color: #ebd25c;
/* background-position: 17px -298px; */
border: 1px solid #d1b843;
}
#zt-social .rss {
background-color: #ee8851;
background-position: 17px -380px;
border: 1px solid #d76d34;
}

Chúc các bạn thành công!

Thêm bình luận


Mã an ninh
Làm tươi

Tạo tài khoản


khac-phuc-loi-khong-nhan-sim-s5

Cho dù bạn có đang sở hữu một chiếc smartphone đẳng cấp và sang ...

penguin-4

Tính đến thời điểm hiện tại là sau gần 2 năm kể từ khi google tung ...

sitemap-trong-seo4 

Có nhiều bạn mới vào nghê SEO thường hay hỏi về cách tạo ...

hang-on-creating-database-tables-joomla

Bạn đang tiến hành cài đặt Joomla 3x trên Localhost ( sử dụng phần ...

nukeviet-cms-4.0-rc2-homepage 

NukeViet CMS 4.0 RC2 ngoài việc sửa các lỗi của NukeViet 4.0 ...

ux-ui

Trong thời gian gần đây chúng ta được nghe nhắc rất nhiều đến cụm ...