Make Social Network With Animation CSS

Bingung juga tidak ada bahan ngepost nih :d Berbicara artikel bertemakan share / berbagi di blog keren ini sudah ada beberapa. Disamping sudah keren punya, dalam pemasangan diperlukan skill mumpuni ;)) Mari berjalan-jalan ria dolo:

• Make share links use weloveiconfonts.
• Jquery selected text search and share.
• Drag and search and share.
• Tips and trick add share link use css3.
• Share and bookmark good type.
• Sprite social bookmark and share.
• Jquery social share toolbar for blogger.
• Share/bookmark mobilyblocks style.
• And many more...

Nemu tema serupa, dan memang belum pernah gue postingkan membuat link share (berbagi) full pakai CSS dengan gaya hover muncul-hilang! Original title Social network with animation CSS.

Pada demo sumber efek animasi tidak berkerja! Mungkin ada yg salah atribut pada kode .smedia Saya jg tidak tahu sih :p Tapi saya ganti, eh jalan tuh :-"

#sociales {
width: 64px;
height: 64px;
border-radius: 50%;
border: 5px solid #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPmg6hPh0vkoKXe1nP85LHrpwAlUtmVmriqy3cTbtMY4FN_ktR3x3cxfxhBinFun_gexYw9Dx8_ubHWRKS45VuV8oRk9RVZk69LqevGotLMkFqv0yqgSdhC7Qp96hryafslZHK0z95g87G/s1600/share_core_square.jpg);
}
.smedia {
position: absolute;
display: inline;
opacity: 0;
width: 46px;
height: 46px;
z-index: 100;
text-indent: -999px;
margin: 10px 0px 0px 10px;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#sociales:hover .smedia {
opacity: 1;
transform: translate(0px,0);
-webkit-transform: translate(0px,0);
-o-transform: translate(0px,0);
-moz-transform: translate(0px,0);
margin: 10px 0px 0px 20px;
}
#sociales:hover .smedia:nth-child(1) {
position: absolute;
left: 65px;
}
#sociales:hover .smedia:nth-child(2) {
position: absolute;
left: 110px;
}
#sociales:hover .smedia:nth-child(3) {
position: absolute;
left: 155px;
}
#sociales:hover .smedia:nth-child(4) {
position: absolute;
left: 200px;
}
#sociales:hover .smedia:nth-child(5) {
position: absolute;
left: 245px;
}
#sociales:hover .smedia:nth-child(6) {
position: absolute;
left: 290px;
}
.smedia.facebook {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioptDd2WiTFaof-VzrsUtIjCJqBfKRu6dbfr3XB-LPC8KLtD0Z16tTIMYGGZ_iFD6vI7CB-qIWh4Cn7ttVC8xumrpECfUNQ5SLwkwCwaVzbs26HY5TTFcu0CFgBKG51t-IlcqKb8cXP1KT/s1600/facebook.png);
}
.smedia.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWnXuMCWo8V7FwOR-sraI-QZdFeyEx6WOlwjk_gSjrCG4IQISMA-Orf3Xk5S30B6Emmfqfb6wSwD16PJlhtvNXIT3kfWvvVCOW9zi7vmFP7PRjIe14jp9f1xyyJvwdfNmRA6JH1A8rVjQl/s1600/twitter.png);
}
.smedia.email {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bO0nr1Mf2tCAlwS-3D6LNvfdDp_ZYqrUdE7I1eNJof-A6GUj67DOFxdJA-T0yU0JhSexL7181-g_gZXuBqh6jjhU40whTAAoCAaDj2wtg0Db1GDCwzg_XYGrQdZO2dEPL4ykxlQn528I/s1600/email.png);
}
.smedia.instagram {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLP8bP2UnJ3LsHoWeiR-GAAJ-L-spfPkzhJlUb78Ch37D32Wy8jgbKmvPLniNBJ1-LFAu7lTUJ9cRlG93PFnCZfjomU8EItzvEeRJzjixUkcLYdzPwLvqIT_N8Ksn0reh1MJkXIUNHBgY/s1600/instagram.png);
}
.smedia.youtube {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwfv7VSIISxmyTH6QFznKomnHz0oh7qk_EfJ7_oumFUlxaA8lsxY7FH64Kz9gcB7OQotV0l9N4RZwGB9ZvNGLVfRyQoycCVh8ZspMWKxFEmRrTocGUBPTqvA4hD1CtUsSNl5UuwHVg0RTi/s1600/youtube.png);
}
.smedia.vimeo {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9r0i9Usj65j3qa7F39NQ3TXN1qhETnZ2yjlNl3g37jQJdng2YQPcHpGgKjYcVYldeFEkkAisxdncpIrmYo2LxTYlf5VpyHHSK5CFbiNtFRuI5tO2QNs6CvqJwD08fcfpys_xHgEHuIC3L/s1600/vimeo.png);
}
.smedia:hover {
background-position: 0 -46px;
}

Markup HTML<div id="sociales">
<a class="smedia facebook" href="https://www.facebook.com/pages/Tutorial-Blog-for-Stylish-Blogger/122292581115426"></a>
<a class="smedia twitter" href="http://www.twitter.com/bebenkoben"></a>
<a class="smedia instagram" href="#"></a>
<a class="smedia youtube" href="#"></a>
<a class="smedia vimeo" href="#"></a>
<a class="smedia email" href="#"></a>
</div>

DEMOhttp://jsbin.com/emaket/1Happy coding \m/