◄ Min  Size Fonts: + | - | ± Color: Max ►

Make Social Media Icons With CSS3 Animated

Ada tutorial ringan membuat link share sederhana dengan sentuhan efek hover. Tampilan awal akan terlihat biasa saja, ketika di hover akan terlihat efek hover dengan gambar berwarna. Beberapa tut's serupa dengan varian berbedaCuma ada 4 buah link tujuan, yaitu ke RSS,tiwtter,facebook dan google plus. Jika kalian mau menambahkan icons/links berarti harus buat sendiri gambarnya yah :d
Markup HTML<div class='social-wrap'>
<ul>
<li><a class='rss' href='YOUR-LINK' target='_blaank'>Rss</a></li>
<li><a class='twitt' href='YOUR-LINK' target='_blaank'>Twit</a></li>
<li><a class='fb' href='YOUR-LINK' target='_blaank'>FB</a></li>
<li><a class='google_p' href='YOUR-LINK' target='_blaank'>G+</a></li>
</ul>
</div>
Kode CSS
.social-wrap {
margin: 0px;
padding: 0px;
}
.social-wrap ul li{
list-style: none;
}
.social-wrap li a {
margin: 0px 5px 0px;
width: 60px;
height: 60px;
float: left;
text-indent: -99999px;
border: solid 1px #555;
border-radius: 15px;
-webkit-border-radius: 15px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
.social-wrap li a.fb {
background: #fff url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat -0px -88px;
}
.social-wrap li a.fb:hover {
background: #fff url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat -0px -0px;
}
.social-wrap li a.twitt {
background: #fff url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0px -88px;
}
.social-wrap li a.twitt:hover {
background: #fff url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0px 0px;
}
.social-wrap li a.google_p {
background:#fff url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0px -88px;
}
.social-wrap li a.google_p:hover {
background: #fff url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0px 0px;
}
.social-wrap li a.rss {
background:#fff url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0px -88px;
}
.social-wrap li a.rss:hover {
background: #fff url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0px 0px;
}
Happy coding \m/
Loading...
XMake Social Media Icons With CSS3 Animated
Membuat link berbagi sederhana menggunakan css3 animated social media icons
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE