[Web] Membuat Tombol Social Media - nblognlife
» » [Web] Membuat Tombol Social Media

[Web] Membuat Tombol Social Media

— —


     Selamat datang kembali di nblognlife.com, kali ini saya akan berbagi cara membuat tombol social media. Sebagai contoh, kita akan membuat tiga tombol social media, diantaranya facebook, twitter, dan google plus.

     Sebelum masuk ke pembahasan utama, di sini kita akan menggunakan font-awesome untuk simbol-simbol dari tombol social media yang akan kita buat. Letakkan kode berikut setelah tag <head>:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>


Tombol Social Media 1
     Pada tombol social media yang pertama, kita akan membuat tombol-tombol social media yang umum digunakan. Ketika tombol-tombol tersebut disorot (mouse berada di atas tombol) kita akan mengubah background dan warna text dari tombol sehingga akan membedakan dari keadaan normal.
Kode HTML:
<div>
<ul>
<li class="RSsocmed_biasa">
<a class="facebook" href="https://www.facebook.com/" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></a>
<a class="twitter" href="https://twitter.com/" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></a>
<a class="google" href="https://plus.google.com/" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></a>
</li>
</ul>
</div>

Kode CSS:
<style type="text/css">
.RSsocmed_biasa {text-align:center; list-style:none !important}
.RSsocmed_biasa a{display:inline-block;width:40px; height:40px; line-height:40px; background:#f2f2f2;transition:background .3s;overflow:hidden; margin:auto; color:#777}

.RSsocmed_biasa a:hover{color:#fff}
.RSsocmed_biasa a.facebook:hover {background-color:#5C82D0}
.RSsocmed_biasa a.twitter:hover {background-color:#40BFF4}
.RSsocmed_biasa a.google:hover {background-color:#EA5D4B}
</style>

Hasil:


Tombol Social Media 2
     Pada tombol social media yang kedua ini, kita akan membuat tombol-tombol social media yang menggunakan atribut transform:rotate(ndeg). Ketika tombol-tombol tersebut disorot (mouse berada di atas tombol) kita akan mengubah derajat dari tombol sehingga akan membedakan dari keadaan normal.
Kode HTML:
<div>
<ul>
<li class="RSsocmed_rotate">
<a class="facebook" href="https://www.facebook.com/" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></a>
<a class="twitter" href="https://twitter.com/" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></a>
<a class="google" href="https://plus.google.com/" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></a>
</li>
</ul>
</div>

Kode CSS:
<style type="text/css">
.RSsocmed_rotate {text-align:center; list-style:none !important}
.RSsocmed_rotate a{display:inline-block;width:40px; height:40px; line-height:40px; background:#f2f2f2;transition:.5s;overflow:hidden; margin:auto; color:#777}

.RSsocmed_rotate a:hover{color:#fff}
.RSsocmed_rotate a.facebook:hover {background-color:#5C82D0;transform:rotate(45deg)}
.RSsocmed_rotate a.twitter:hover {background-color:#40BFF4;transform:rotate(-45deg)}
.RSsocmed_rotate a.google:hover {background-color:#EA5D4B;transform:rotate(360deg)}
</style>

Hasil:



Keterangan :
Nilai positif (+) pada rotate : tombol diputar searah dengan putaran jarum jam.
Nilai negatif (-) pada rotate : berarti tombol diputar berlawanan dengan putaran jarum jam.

transform:rotate(45deg), artinya memutar 45 derajat ke kanan.
transform:rotate(-45deg), artinya memutar 45 derajat ke kiri.
transform:rotate(360deg), artinya memutar 360 derajat ke kanan.


 Tombol Social Media 3
     Pada tombol social media yang ketiga ini, kita akan membuat tombol-tombol social media dengan menggunakan atribut background-position(x y). Kita akan membuat tombol-tombol social media yang seakan bergerak ke atas saat disorot. Sebelum masuk pada kode dan css, siapkan gambar seperti di bawah ini (sesuaikan dengan kebutuhan).
Gambar untuk Membuat Tombol Social Media

Kode HTML:
<div>
<ul>
<li class="RSsocmed-anim">
<a class="facebook" href="https://www.facebook.com/" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></a>
<a class="twitter" href="https://twitter.com/" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></a>
<a class="google" href="https://plus.google.com/" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></a>
</li>
</ul>
</div>

Kode CSS:
<style type="text/css">
.RSsocmed-anim {text-align:center; list-style:none !important}
.RSsocmed-anim a{display:inline-block;min-width:40px;max-width:40px;min-height:40px;max-height:40px;background:#2D3035 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9bTH7940r2CsBjasiwSk5NeW417i2Dy8eFhgx8TgCluiyANgNdoDf9IfDvju3siU3CIvPSdGHCdtJN55vyfjsDO2teKdNMAn69UEGh-FgfOrDkvU-anDCX070u6z1r8OGbNZTdW7yYeg/s1600/nblognlife.com+-+sosial+media.jpg) no-repeat;text-indent:-9999px;transition:.3s;overflow:hidden; margin:auto}

.RSsocmed-anim a.facebook{background-position:0 0}
.RSsocmed-anim a.facebook:hover {background-position: 0 -45px}
.RSsocmed-anim a.twitter{background-position:-45px -3px}
.RSsocmed-anim a.twitter:hover {background-position:-45px -48px}
.RSsocmed-anim a.google{background-position:-90px -3px}
.RSsocmed-anim a.google:hover {background-position:-90px -48px}
</style>

Hasil:


Keterangan:
background-position(x y);
x : nilai vertical
y : nilai horizontal
     Untuk menggeser posisi background ke kiri gunakan nilai negatif (-x), jika ingin menggeser ke kanan gunakan nilai positif(x). Sedangkan, jika kita ingin menggeser posisi background ke atas gunakan nilai negatif (-y), jika ingin menggeser ke bawah gunakan nilai positif (y).

.RSsocmed-anim a.twitter:hover {background-position:-45px -48px}, artinya kita menggeser background ke kiri sebesar 45px dari keadaan normal, dan ke atas sebesar 48px dari keadaan normal. Jadi ketika tombol twitter di sorot akan terlihat bergerak ke atas.


Tombol Social Media 4
     Pada tombol social media yang ketiga ini, kita akan membuat tombol-tombol social media dengan menggunakan atribut position:fixed. Kita akan membuat tombol-tombol social media yang melayang di bagian kiri layar.

Kode HTML:
<div>
<ul>
<li class="RSsocmed_fixed">
<a class="facebook" href="https://www.facebook.com/" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></a>
<a class="twitter" href="https://twitter.com/" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></a>
<a class="google" href="https://plus.google.com/" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></a>
</li>
</ul>
</div>

Kode CSS:
<style type="text/css">
.RSsocmed_fixed {list-style:none !important; position:fixed; left:0; top:35%; z-index:222}
.RSsocmed_fixed a{padding:0 0 0 20px; display:block;width:40px; height:40px; line-height:40px; background:#f2f2f2;transition:.2s;overflow:hidden; margin:0; color:#fff}

.RSsocmed_fixed a:hover{color:#fff}
.RSsocmed_fixed a.facebook {background-color:#5C82D0}
.RSsocmed_fixed a.twitter {background-color:#40BFF4}
.RSsocmed_fixed a.google{background-color:#EA5D4B}
.RSsocmed_fixed a.facebook:hover {width:50px}
.RSsocmed_fixed a.twitter:hover {width:50px}
.RSsocmed_fixed a.google:hover {width:50px}
</style>

Keterangan : 
Atribut kuncinya ada pada atribut position, left, dan top. Di sini saya memberi nilai left:0 (membuat tombol mepet ke kiri) dan top:35% (membuat tombol diletakkan pada 35% dari window yang dihitung dari bagian atas layar).

 *Hasil untuk tombol social media ke 4 dapat dilihat pada bagian kiri layar.

Penting!
Pada setiap kode css pada tombol social media di atas terdapat atribut transition: n s. Atribut ini mempunyai peran penting menentukan kecepatan transisi dari suatu keadaan ke keadaan lain. Atribut inilah yang membuat efek animasi pada tombol. Ubahlah nilai atribut transition menjadi transition: 0s dan lihat perbedaannya.

[RS]

Klik Like & Share jika postingan ini bermanfaat
Apa tanggapan Anda?

Berikan tanggapan Anda melalui kolom komentar yang telah disediakan.
- Gunakan bahasa yang sopan;
- Saat menjadikan postingan pada blog ini sebagai referensi, jangan lupa mencantumkan sumbernya (link dari blog ini).

Jika blog ini bermanfaat jangan lupa memberikan 'like' atau 'share' untuk mendapatkan update terbaru.

Terima kasih