orbluz3r

Hallo selamat malam ORBLUZ3R ,kali ini mw share ilmu blogging nih sobat yaitu tentang css group button seperti yang anda lihat di atas kanan pojok , cssnya hanya kombinasi ,dari css transition,border-raduis, dan dilengkapi dengan hover .seperti yang kalian coba hovernya dengan rotate dan jika dihover/mousenya diarahkan ke group itu maka dia akan berputar dan ber efek shadow .
sebenarnya dapat diganti dengan social media,dengan hanya sedikit diganti gambar dan link alamatnya, yah seperti yang anda lihat css tersebut hanya ada 3 icon group yaitu : kancut keblenger , deezclan,dan kreszernity ,tapi bisa diubahkok berikut CSSnya :v

Css :

.social{width:177px;height:68px;background:#92d2ff;border-right:5px solid #0196ff;border-left:5px solid #0196ff;border-radius:50px;text-align:center;overflow:hidden;float:right}
#kresz{margin-top:6px;margin-right:3px;background:#e8f6ff;width:55px;height:56px;border-radius:50px;overflow:hidden;float:right;text-align:center}#kresz img{border-radius:50px;width:45px;height:46px;margin-top:5px;transition:All 1s ease;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease}#kresz img:hover{background:rgba(219,153,10,0.99);margin-top:5px;opacity:1.5;padding:0px;transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-webkit-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-moz-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-o-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-ms-transform:rotate(360deg) scale(1) skew(1deg) translate(0px); box-shadow:0px 0px 10px #000}#argoo{margin-top:6px;margin-right:3px;background:#e8f6ff;width:55px;height:56px;border-radius:50px;overflow:hidden;float:right;text-align:center}#argoo img{border-radius:50px;width:45px;height:46px;margin-top:5px;transition:All 1s ease;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease}#argoo img:hover{margin-top:5px;opacity:1.5;padding:0px;transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-webkit-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-moz-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-o-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-ms-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);box-shadow:0px 0px 10px #000}#deez{margin-right:3px;margin-top:6px;background:#e8f6ff;width:55px;height:56px;border-radius:50px;overflow:hidden;float:right;text-align:center}#deez img{border-radius:50px;width:45px;height:46px;margin-top:5px;transition:All 1s ease;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease}#deez img:hover{background:rgba(219,153,10,0.99);margin-top:5px;padding:0px;transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-webkit-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-moz-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-o-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);-ms-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);box-shadow:0px 0px 10px #000}

HTML :

  <div class='social'>
    <div id='kresz'><a href='http://www.facebook.com/groups/ciyus/'><img alt='some_text' src='http://i.imgur.com/CUgjQhC.png'/> </a></div>
 
   <div id='deez'><a href='http://www.facebook.com/groups/DeezClan'><img alt='some_text' src='http://i.imgur.com/mI3bDiD.png'/> </a></div>
 
    <div id='argoo'><a href='http://www.facebook.com/groups/180054282027083/ '><img alt='Kancut Keblenger' height='66' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDWy7v9msn_NIrk-aL7rxljMZqaVmVqFmgGRIVeg_3ibWVtj4S4O9QynH6RX4k0EIaBZRnM9Cznc09_JmmIHJCzG4v37z-H7Kl6Jxm5pmzgyTx_ceG6aPkrcXe15eJXYmBBmVbHDjy5rU/s1600/kancudd.png ' width='70'/></a></div></div>

Keterangan :
- Css diletakkan di atas ]]>
- HTML letakkan sesuai keinginan anda :v
Contoh : letakkan di bawah  <div class='header'>  << ---css akan diletakkan di dalam header,setiap kode css berbeda jadi cari kode html dari css anda itu sendiri :)

sekian ttutor dari saya mohon maaf  atas kesalahan kata ,mohon dimaklumi karna saya tidak biasa menjelaskan secara teori :)

jika kurang jelas bisa ditanya di fb

assalamu'alaikum wr wb