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

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

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