Membuat tombol jejaring sosial menggunakan CSS di blog

Membuat tombol jejaring sosial menggunakan CSS di blog

  21 February    Andika

---

Tombol jejaring sosial ini pernah saya gunakan pada blog ini sebelumnya. Namun karena saya tidak ingin menggunakannya untuk beberapa waktu ke depan, maka kodenya saya backup terlebih dahulu di sini. Yah mana tahu suatu saat kodenya saya butuhkan kembali.

Bicara soal tampilan, saya pikir tampilannya cukup oke kok, terlebih masing-masing tombolnya di buat dalam ukuran persen. Sehingga tombol ini termasuk kategori Responsive.

Untuk ikonnya, saya menggunakan Font Awesome. Latar tombol utamanya saya buat dalam warna #EEE. Dan saat tombol ini di Hover, maka warna-warna ciri khas dari jejaring sosial terkait akan muncul.

Berikut Demonya,

Silahkan hover pada masing-masing tombolnya.

Berikut kode CSSnya,

.kolom-sosial a {
  width:25%;
}

#sosmednya:before,
#sosmednya:after {
  content:'';
  display:table;
  clear:both;
}

#sosmednya {
  list-style:none;
  margin:0;
}

#sosmednya li {
  position:relative;
}

#sosmednya a {
  float:left;
  display:inline-block;
  font-size:42px;
  color:#666;
  padding:30px 0;
  text-align:center;
  background:#EEE;
  border-right:1px solid #DDD;
  transition:all 0.2s ease-in-out;
}

#sosmednya li:last-child a {
  border-right:0;
}

#sosmednya a:hover {
  text-decoration:none;
  color:#FFF;
}

#sosmednya .fa-twitter:hover {
  background:#3aa9de;
}

#sosmednya .fa-google-plus:hover {
  background:#d14836;
}

#sosmednya .fa-facebook:hover {
  background:#3a5999;
}

#sosmednya .fa-pinterest:hover {
  background:#800000;
}

Dan ini kode HTMLnya.

<ul class='kolom-sosial' id='sosmednya'>
    <li><a class='fa fa-twitter' href='#' title='Follow us on Twitter!'/></li>
    <li><a class='fa fa-google-plus' href='#' title='Google Plus'/></li>
    <li><a class='fa fa-facebook' href='#' title='Facebook page'/></li>
    <li><a class='fa fa-pinterest' href='#' title='Pinterest'/></li>
</ul>

Silahkan tempatkan kode HTML pada bagian blog yang kamu inginkan. Kalau menurut saya sih, bagian bawah blog di atas Footer adalah lokasi terbaik.