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

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: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/AVvXsEgUatynruerdmw_L7R-5dUZ-snM5pDLr5fCc6SsMOu3rqLPZKUhJsH0RwwFeLzr7iBkkFk-DTXlsFqMJosBe9mvKafLGEj1ilOq3a6jy2KvxyDZqrKQuFwiSMmff8qsUekuayt2JncJL-kj/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/AVvXsEjFRcC5xciW8tXouoEvrV6bhrbC54QIks5v8Us9WYvwaH6_vz1JgpOQjHiQ95Io-csmC0xY5h6mE2ybpO4BNxbHMmKFm_dm_Wa_ut6WJkazENcs0Rlu1lwmXUQaBEWn_feV3P_HGHBcgAzD/s1600/facebook.png);
}
.smedia.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzJZc4S2fV9-KqefiyLHOfTRXRQ-T4SnTgO6_bEyXhZD01mBDsXiNmMa55Dzp_PhpPAPDpYqpyuTVOrotXWy_LajHwxJt0T4A9_VNQArp7luBw2b9VpLiDZ1r-jIHgN36cJ7y6loL-Z4zy/s1600/twitter.png);
}
.smedia.email {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGio14nyxc8J_UGb7QJTjqMb8U9Gxy3gD59X8oVsIJj5EJQZT382Ui-2LG1NWpJufilwIMrTzzUqYcnOkfzOUB0IVXUYFpp-PsHTwmVrpG64WC0z4zyPia-pjhS5XL_7p_58S9yhqNKoWq/s1600/email.png);
}
.smedia.instagram {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8AOBlOcH-HA_lR4sp8WxVVP-aPAdePLD5CyMFqWx2q6Dq_OS0gmzl9Pkw1NmSYQtuaIIOvntjttQcYt-LhdBDN12_n_NVwWHxBAPv5lj7vcbKxEBhlmp0QtDkRYnav5N11i-PzJ9OdHuP/s1600/instagram.png);
}
.smedia.youtube {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0xt_hbv9Amni_rK02sSUrYCAmU_tdpfVOeWKMxm3zmt8MDRu3hvVaVgjLTQo8cbHKqQ14ITBceQV2L2uE-g7QNLlS5CYaXHTcIXpLSLU-FvwjaCi-pKtLc8bKnEsssFfUYDo6TdFhYGR4/s1600/youtube.png);
}
.smedia.vimeo {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvyt6IJg5BEq_k9C0OwiW_aBpE2KFxkzChWA9zAv7VPXkSrZpp2DgREQv2y_cf1aPkJ4Ho949hZ0QIXs1ulNv2RPjlTIs6BEybhrhBXlbFnvCq2PvIqaWKNNAjpzD4zqhfHRJklvK_A8bg/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>
DEMO
http://jsbin.com/emaket/1
Happy coding \m/
Loading...
XMake Social Network With Animation CSS
Membuat link berbagi (social network) dengan efek animation full memakai CSS
Subscribe my posts Register For Free!
[?] 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/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE