Sharing Button dengan Efek Transisi

Aryan.ngrambe.net - Kali ini membuat Sharing Button dengan Efek Transisi

Background yang digunakan

Ini HTMLnya
<div class="sosmed"> <a class="fb" href="#"></a> <a class="twit" href="#"></a> <a class="inst" href="#"></a> <a class="gplus" href="#"></a> <a class="fsqu" href="#"></a> <a class="rss" href="#"></a> <a class="sound" href="#"></a> <a class="pint" href="#"></a> <a class="linke" href="#"></a> <a class="path" href="#"></a> </div>
Ini CSSnya
.sosmed{ width:260px; overflow:hidden; } .sosmed a{ background-image:url(images/social.png); float:left; margin:8px 5px ; outline: none; width:42px; height:47px; } .sosmed a:hover,.sosmed a:focus{ height:47px; transition: all 0.3s ease-in-out; } .fb{ background-position:-2px 0px; } .fb:hover,.fb:focus{ background-position:-2px 100px; } .twit{ background-position:182px 0px; } .twit:hover,.twit:focus{ background-position:182px 100px; } .inst{ background-position:137px 0px; } .inst:hover,.inst:focus{ background-position:137px 100px; } .gplus{ background-position:91px 0px; } .gplus:hover,.gplus:focus{ background-position:91px 100px; } .fsqu{ background-position:45px 0px; } .fsqu:hover,.fsqu:focus{ background-position:45px 100px; } .rss{ background-position:-2px 145px; } .rss:hover,.rss:focus{ background-position:-2px 50px; } .sound{ background-position:182px 145px; } .sound:hover,.sound:focus{ background-position:182px 50px; } .pint{ background-position:137px 145px; } .pint:hover,.pint:focus{ background-position:137px 50px; } .linke{ background-position:91px 145px; } .linke:hover,.linke:focus{ background-position:91px 50px; } .path{ background-position:45px 145px; } .path:hover,.path:focus{ background-position:45px 50px; }
Hasilnya kira-kira akan menjadi seperti berikut ini :

Cara membuat tombol sharing dengan efek transisi

Jangan lupa untuk mengubah url gambar background di css dengan url gambar background diatas :) #fikirkan