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 berbeda

Cuma 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw-n-28YWY245Kx-oKzOESVyjuvo_2QMrsaB3xcqB9984iPkoeQhSUI4aIknxVlnZc6z1DswTAe6a8bvgb0JXDP0xnC_7y536nyP-Ne6zMBFftpN351ZgP0YI8hATlWNHwQziE_l2HHA/s1600/facebook.png) no-repeat -0px -88px;
}
.social-wrap li a.fb:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw-n-28YWY245Kx-oKzOESVyjuvo_2QMrsaB3xcqB9984iPkoeQhSUI4aIknxVlnZc6z1DswTAe6a8bvgb0JXDP0xnC_7y536nyP-Ne6zMBFftpN351ZgP0YI8hATlWNHwQziE_l2HHA/s1600/facebook.png) no-repeat -0px -0px;
}
.social-wrap li a.twitt {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwu28ycMTZiqGg5SQTW5TlgjS6gSMIHOXyxTsAuYjOHAWlzal_o_QKbdqz8r49KEJ3FwPc651kOqcWRxzTdcDm_OfPu-0nMx816OTvjXR8d6dwD1KkkBmdQOH_aPuezR3P_jf0R5bCfg/s1600/twitter-1.png) no-repeat 0px -88px;
}
.social-wrap li a.twitt:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwu28ycMTZiqGg5SQTW5TlgjS6gSMIHOXyxTsAuYjOHAWlzal_o_QKbdqz8r49KEJ3FwPc651kOqcWRxzTdcDm_OfPu-0nMx816OTvjXR8d6dwD1KkkBmdQOH_aPuezR3P_jf0R5bCfg/s1600/twitter-1.png) no-repeat 0px 0px;
}
.social-wrap li a.google_p {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8U1IrWsG0ONe8kewwQNzY6wmoX9EI9soxmTogSWcD2lSr5dRalb5N93EoZsDgSJ1yz2t44BTitJeJE_Xc5b2eWrwFQw2D7R5dqVm7KBa8fHA8pI5-angHtyyYKnK23NATYg30PSztg/s1600/google.png) no-repeat 0px -88px;
}
.social-wrap li a.google_p:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8U1IrWsG0ONe8kewwQNzY6wmoX9EI9soxmTogSWcD2lSr5dRalb5N93EoZsDgSJ1yz2t44BTitJeJE_Xc5b2eWrwFQw2D7R5dqVm7KBa8fHA8pI5-angHtyyYKnK23NATYg30PSztg/s1600/google.png) no-repeat 0px 0px;
}
.social-wrap li a.rss {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKKgpAg8YzwlDjsFYuktMzwI7GvZYYXxP8gXX58LUaae0FF-DLM76NeW3H-ayU8ozzFhx4jGzUbAVSiJ0cGgXK5mQmeBuqziPBSJkyHwFqtyjwntG4AGWpq_6RBucpW76V4lOIQI8G_A/s1600/twitter.png) no-repeat 0px -88px;
}
.social-wrap li a.rss:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKKgpAg8YzwlDjsFYuktMzwI7GvZYYXxP8gXX58LUaae0FF-DLM76NeW3H-ayU8ozzFhx4jGzUbAVSiJ0cGgXK5mQmeBuqziPBSJkyHwFqtyjwntG4AGWpq_6RBucpW76V4lOIQI8G_A/s1600/twitter.png) no-repeat 0px 0px;
}

Happy coding \m/