Aku sering menggunakan social media button untuk menambahkan fitur url sharing dari situs-situs yang ada seperti sharethis, addthis, dan lainnya.
Sekarang aku coba membuat social media button sendiri dengan HTML, CSS dan Font Awesome.
1. Buat File HTML
Buat sebuah file HTML dan beri nama index.html, simpan.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Social Media Button CSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<button type="button">Share This</button>
</body>
</html>
Terlihat tampilan awal button masih standar seperti gambar dibawah ini:
2. Buat File CSS
Setelah file HTML dibuat, selanjutnya kita membuat sebuah file CSS dan beri nama file tersebut style.css.
Dalam tutorial ini aku meletakan file style.css dalam sebuah folder yang ku beri nama css.
Kode CSS:
.social-media-button {
border: none;
color: #FFFFFF; /* WHITE */
font-size: 16px;
padding: 0.5em 1em;
}
.social-media-button:hover {
opacity: 0.9;
}
Tambahkan atribut class pada button di file index.html yang sudah kita buat sebelumnya. Lihat kode berikut.
Kode HTML:
<body>
<button type="button" class="social-media-button">Share This</button>
</body>
Simpan dan kalau kamu berhasil tampilan selanjutnya akan seperti gambar dibawah ini:
3. Font Icon
Hal yang terpenting dalam tutorial ini yaitu me-load font icon dalam tag <head> pada HTML yang telah kita buat.
Aku menggunakan Font Awesome dibawah ini.
Kode HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Social Media Button CSS</title>
<!-- LOAD FONT ICON: FONTAWESOME -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<button type="button" class="social-media-button">Share This</button>
</body>
</html>
4. Desain
Sekarang saat nya kita mendesain social media button dengan CSS.
Kode CSS:
.social-media-button.icon:before {
font-family: "FontAwesome";
padding-right: 0.5em;
}
Kode diatas akan mengenerate font icon kedalam button yang telah kita buat, namun harus menambahkan kelas icon pada button yang telah kita buat di file HTML.
Kode HTML:
<button type="button" class="social-media-button icon">Share This</button>
Kemudian aku mulai membuat social media button untuk Facebook. Buka file style.css dan tambahkan baris kode dibawah ini.
Kode CSS:
/* FACEBOOK */
.social-media-button.icon.facebook:before {
content: "\f230";
}
.social-media-button.facebook {
background: #3b5998;
}
Simpan dan buka kembali file index.html, kemudian tambahkan kelas facebook pada button yang telah dibuat.
Kode HTML:
<body>
<button type="button" class="social-media-button icon facebook">Share This</button>
</body>
Simpan dan hasilnya akan seperti ini:
Kamu juga bisa menambahkan icon social media lainnya seperti Twitter, Instagram, Google+, Youtube, WhatsApp dan lainnya kedalam file css kamu.
Kode CSS:
/* TWITTER */
.social-media-button.icon.twitter:before {
content: "\f099";
}
.social-media-button.twitter {
background: #1da1f2;
}
/* YOUTUBE */
.social-media-button.icon.youtube:before {
content: "\f167";
}
.social-media-button.youtube {
background: #cd201f;
}
/* GOOGLE+ */
.social-media-button.icon.gplus:before {
content: "\f0d5";
}
.social-media-button.gplus {
background: #dd4b39;
}
/* INSTAGRAM */
.social-media-button.icon.instagram:before {
content: "\f16d";
}
.social-media-button.instagram {
background: #517fa4;
}
/* PINTEREST */
.social-media-button.icon.pinterest:before {
content: "\f0d2";
}
.social-media-button.pinterest {
background: #bd081c;
}
/* LINKEDIN */
.social-media-button.icon.linkedin:before {
content: "\f08c";
}
.social-media-button.linkedin {
background: #0077b5;
}
/* RSS */
.social-media-button.icon.rss:before {
content: "\f143";
}
.social-media-button.rss {
background: #f26522;
}
/* SKYPE */
.social-media-button.icon.skype:before {
content: "\f17e";
}
.social-media-button.skype {
background: #00aff0;
}
/* WHATSAPP */
.social-media-button.icon.whatsapp:before {
content: "\f232";
}
.social-media-button.whatsapp {
background: #43d854;
}
/* WORDPRESS */
.social-media-button.icon.wordpress:before {
content: "\f19a";
}
.social-media-button.wordpress {
background: #21759b;
}
/* TUMBLR */
.social-media-button.icon.tumblr:before {
content: "\f173";
}
.social-media-button.tumblr {
background: #35465c;
}
/* DROPBOX */
.social-media-button.icon.dropbox:before {
content: "\f16b";
}
.social-media-button.dropbox {
background: #007ee5;
}
Dan ubah kelas sesuai icon yang ingin ditampilkan, misalnya:
Kode HTML:
<button type="button" class="social-media-button icon twitter">Share This</button>
<button type="button" class="social-media-button icon youtube">Share This</button>
<button type="button" class="social-media-button icon instagram">Share This</button>
<button type="button" class="social-media-button icon dropbox">Share This</button>
<button type="button" class="social-media-button icon rss">Share This</button>
<button type="button" class="social-media-button icon whatsapp">Share This</button>
<button type="button" class="social-media-button icon wordpress">Share This</button>
<button type="button" class="social-media-button icon tumblr">Share This</button>
<button type="button" class="social-media-button icon gplus">Share This</button>
<button type="button" class="social-media-button icon skype">Share This</button>
<button type="button" class="social-media-button icon pinterest">Share This</button>
<button type="button" class="social-media-button icon linkedin">Share This</button>
Cara ubah warna dengan html dan css di sini: Kode Warna HTML Lengkap
Demikian tutorial belajar CSS cara membuat social media button sendiri. Selamat berkarya dan jangan lupa share link ini yah! 🙂
Baca Juga:
- 3 Desain Flat Button dengan CSS – Bikin Web Jadi Makin Keren!
- Cara Ubah HTML Image menjadi Circular Seperti Profile Picture pada Social Media
- Belajar CSS Background Image – Cara Penggunaan dan Kode
- 3 Desain HTML Heading dengan CSS
- Form Input HTML – Cara Percantik Dengan CSS
- Belajar CSS: Percantik Fieldset pada Form HTML
- Belajar CSS: Desain Table Professional