ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

Membuat 15 Efek Social Media Button Dengan CSS Part I

Hi Sobat… ketika kita browsing dan membuka berbagai website, sering kita temui berbagai social media button dengan berbagai efek menarik,.

Efek tersebut biasanya muncul ketika kita arahkan mouse diatasnya (:hover), nah bagi yang penasaran bagaimana cara membuatnya, pada kesempatan ini kita akan membahasnya lebih dalam.

Kita akan buat beberapa button, tepatnya 15 button dengan efek seperti  ini:

Jika sobat ingin langsung memakainya bisa langsung diklik tombol download, tinggal diedit file css-nya sesuai keperluan. Jika ingin melihat demo secara keseluruhan, silakan klik tombol demo.

Pembahasan dibagi menjadi dua bagian, untuk bagian II dapat diikuti pada link: Membuat 15 Efek Social Media Button Dengan CSS Part II.

I. Persiapan

Sebelum kita membuat efek social media button, terlebih dahulu kita lakukan beberapa persiapan

Dukungan Browser

Efek yang dibahas pada tutorial ini dapat berjalan dengan baik di browser modern, karena browser tersebut telah mendukung css property transition.

Property ini merupakan komponen utama untuk membuat perpindahan element menjadi halus.

Khusus untuk Internet Explorer property ini hanya dapat berjalan dengan baik di versi 10 keatas, karena untuk versi 9 kebawah tidak mendukung property transition dan property sejenis yang berkaitan dengan animasi.

Icon Font

Sebelum masuk ke pembahasan, perlu untuk dibahas jenis icon yang digunakan.

Pada tutorial ini kita menggunakan icon font, saya mengambilnya dari iconmoon, salah satu penyedia layanan icon font yang bagus dan populer.

Icon tersebut bisa langsung digunakan dengan menambahkan class dengan awalan icon-, misal icon-facebook, namun agar lebih fleksibel, kita akan mendefinisikannya sendiri.

Untuk definisi awal, kita buat terlebih dahulu file css yaitu effect_main_single.css, file tersebut akan selalu kita gunakan di setiap pembahasan, selanjutnya isikan css rule pada file tersebut:

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon/icomoon.eot?w6aef1');
	src:url('fonts/icomoon/icomoon.eot?w6aef1#iefix') format('embedded-opentype'),
		url('fonts/icomoon/icomoon.ttf?w6aef1') format('truetype'),
		url('fonts/icomoon/icomoon.woff?w6aef1') format('woff'),
		url('fonts/icomoon/icomoon.svg?w6aef1#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
a {
	font-family: icomoon;
    font-size: 40px;
	line-height: 65px;
    speak: none;
	color: #5D5D5D;
	text-decoration: none;
	text-align: center;
    display: inline-block;
	position: relative;
    width: 64px;
    height: 64px;
	overflow: hidden;
	transition: all .3s;
}
a:before,
a:after {
	transition: all .3s;
}

Pada definisi awal ini, element <a> yang merupakan element utama kita buat dimensinya sebesar 64 x 64px, dengan font family icomoon, akan membuat element <a> dan childrennya hanya dapat diisi icon.

Maksudnya bisa diisikan teks lain tapi jenis font-nya tetap icomoon sehingga tidak pas, karena memang pada tutorial ini kita hanya akan memakai icon.

Struktur Folder

Untuk struktur foldernya, kita buat folder misal Sample CSS Effect untuk menyimpan file html, kemudian didalamnya kita buat folder  css untuk menyimpan file effect_main_single.css dan folder icon_fonts/icomoon untuk menyimpan file fonts.

Struktur foldernya seperti tampak pada gambar berikut:

Membuat Social Media Button - Struktur Folder

untuk setiap pembahasan, sobat bisa langsung klik Demo Single untuk melihat langsung source code yang digunakan.

II. Membuat Social Media Button Dengan Efek Menarik

1. Efek 1: Membuat efek slide up pada icon dengan cssTop

Untuk membuat efek ini, element yang kita perlukan adalah:

  1. Element <a> sebagai element utama dengan background warna abu-abu terang.
  2. Pseudo element :before dengan icon berwarna abu-abu, tanpa background dan
  3. Pseudo element :after dengan icon berwarna putih, tanpa background.

Transisi element seperti tampak pada contoh dibawah (arahkan cursor diatas icon, atau jika menggunakan layar sentuh, touch dan tahan):

contoh untuk beberapa set icon:

Pada contoh diatas, kotak berwarna biru adalah element :before sedangkan yang berwarna hijau adalah element :after Kode HTML yang kita gunakan adalah:

<a class="fb" href="#"></a>

Sedangkan untuk css nya:

.fb{
	background-color: #EAEAEA;
}
.fb:before,
.fb:after {
	content: "f09a";
	position: absolute;
	width: 100%;
    height: 100%;
	left: 0;
}
.fb:before {
	top: 0;
}
.fb:after {
	top: 100%;
	color: #FFFFFF;
}
.fb:hover {
	background-color: #3b5998;
}
.fb:hover:after {
	top: 0;
}
.fb:hover:before {
	top: -100%;
}
Demo Single

Penjelasan:

  • Baris 15 akan memposisikan element :after di sebelah bawah element <a>,
  • Ketika terjadi event :hover, baris 24 akan menggeser element :before keatas dan baris 27 akan menggeser element :after keatas.

2. Efek 2: Membuat efek slide up-down pada icon dengan css Top

Efek ini sama seperti efek nomor 1, baik penggunaan element maupun posisi element, bedanya element :before akan bergeser ke bawah, tidak keatas. Transisi element seperti tampak pada icon berikut:

contoh untuk beberapa set icon:

Keterangan: kotak dengan border berwarna biru adalah element :before sedangkan yang berwarna hijau adalah element :after Kode HTML yang kita perlukan:

<a class="dribbble" href="#"></a>

Sedangkan kode css nya sama seperti efek nomor 1 hanya pada line 27 diubah dari top: -100% menjadi top: 100%. Demo Single

3. Efek 3: Membuat efek slide to right pada icon dengan cssTop

Efek ini juga sama seperti efek sebelumnya, bedanya jika pada efek sebelumnya transisi terjadi pada warna background element <a>, pada efek ini element yang digeser memiliki background sendiri.

Element yang kita gunakan juga sama yaitu:

  1. Element <a> yang berperan sebagai container, dengan background abu-abu terang.
  2. Pseudo element :before dengan icon berwarna abu-abu, tanpa background, dan
  3. Pseudo element :after dengan icon berwarna putih dengan background berwarna hijau.

Transisi element tampak sebagai berikut:

contoh untuk beberapa set icon:

pada icon diatas, element dengan border berwarna biru merupakan element :before, sedangkan yang berwarna hijau merupakan element :after

Kode HTML yang kita perlukan:

<a class="su" href="#"></a>

Sedangkan untuk css nya:

.su {
	background-color: #EAEAEA;
}
.su:before,
.su:after {
	position: absolute;
	content: "f1a4";
	width: 100%;
	height: 100%;
}
.su:before {
	top: 0;
	left: 0;
}
.su:after {
	top: 0;
	left: -100%;
	background-color:#5FBB4C;
	color: #FFFFFF;
}
.su:hover:before{
	left:100%;
}
.su:hover:after{
	left:0;
}
Demo Single

Penjelasan:

  • Baris 17 akan membuat element :after berada di sebelah kiri.
  • Saat terjadi event :hover, baris 22 dan 25 masing-masing akan menggeser element :before dan :after ke kanan.

4. Efek 4: Membuat efek kubus (cube) pada icon dengan cssTop

Efek ini akan membuat element berputar seperti kubus, untuk transisi elemennya terdapat dua macam bentuk, yaitu:

a. Transisi menyerupai kubus

Pada efek ini, transisi seolah olah menyerupai kubus, namun bukan benar-benar kubus karena sedikit terjadi overlap antar element.

Dengan nilai transisi yang kecil, overlap tersebut tidak kelihatan, yang tampak adalah pergeseran yang halus, ditambah dengan efek fade in-out akan memperindah efek yang dihasilkan.

Untuk membuat efek ini, element yang kita perlukan adalah:

  1. Element <a> yang berperan sebagai container dan perspective 3D untuk element childrennya (:before dan :after), namun secara visual tidak terlihat.
  2. Pseudo element :before dengan icon dan dengan background warna tertentu, dan
  3. Pseudo element :after dengan icon dan background warna tertentu.

Transisi element seperti tampak pada contoh berikut:

contoh untuk beberapa set icon:

Pada contoh diatas, element dengan border berwarna merah adalah element <a>, yang berwarna biru adalah element :after, dan yang berwarna hijau adalah element :after.

Kode HTML yang diperlukan:

<a class="gplus" href="#"></a>

sedangkan css rule nya:

.gplus {
	background:none
	overflow: visible;
	perspective: 300px;
}
.gplus:before,
.gplus:after {
	position: absolute;
	top: 0;
	left: 0;
	content: "f0d5";
	width: 100%;
    height: 100%;
}
.gplus:before {
	z-index: 1;
	background-color: #EAEAEA;	
}
.gplus:after {
	background-color: #d34836;
	color: #FFFFFF;
	opacity: 0;
	transform: translateY(33px) rotateX(-90deg);
}
.gplus:hover:before{
	opacity: 0;
	transform: translateY(-33px) rotateX(90deg);
}
.gplus:hover:after{
	opacity: 1;
	transform: rotateX(0);
}
Demo Single

Penjelasan:

  • Perspective pada baris nomor 3 digunakan untuk sudut pandang efek 3D untuk element :before dan :after,
  • Baris 23 akan memposisikan element :after dibawah dengan rotasi sebesar 90° berlawanan arah jarum jam.
  • Ketika terjadi event :hover, baris 27 membuat element :before bergerak ke atas dan berputar 90° searah jarum jam dan baris 31 akan membuat element :after berputar kedepan.

b. Transisi seperti kubus (true cube)

Berbeda dengan versi sebelumnya, pada versi ini, element akan bergerak berurutan, sehingga akan benar-benar seperti kubus yang berputar.

Terdapat beberapa teknik untuk membuat efek ini, yang perlu diperhatikan adalah apakah terjadi “zoom” pada element? baik sebelum maupun sesudah diputar.

Jika ya, maka sebaiknya cari alternatif cara lain, karena hal tersebut akan membuat teks menjadi pecah, untuk mengatasinya salah satu solusinya adalah kita buat sisi-sisi kubus berdiri sendiri dan masing-masing memiliki transisi sendiri-sendiri.

Element yang diperlukan dan pergerakan antar element sama dengan efek sebelumnya. Transisi element seperti tampak pada contoh berikut:

contoh untuk beberapa set icon:

pada contoh diatas, element dengan border berwarna biru adalah element :before, sedangkan yang berwarna hijau (ketika :hover) adalah element :after.

Kode HTML yang kita perlukan:

<a class="gplus-cube" href="#"></a>

sedangkan css yang kita perlukan:

.gplus-cube {
	perspective: 700px;
	-webkit-transform-style: preserve-3d;
	overflow: visible !important;
	width: 64px;
    height: 64px;
}
.gplus-cube:before,
.gplus-cube:after {
	content: "f0d5";
    position: absolute;
	width: 100%;
    height: 100%;
    left: 0;
	top: 0;
	transform-origin: 50% 50% -32px;
	transition: all 0.3s ease-out;
}
.gplus-cube:before {
	z-index: 1;
	background-color: #d9d9d9;
}
.gplus-cube:after {
	background-color: #d34836;
	color: #FFFFFF;
	transform: rotateX(-90deg);
}
/* EFFECT */
.gplus-cube:hover:after {
	z-index: 2;
	transform: rotateX(0);
}
.gplus-cube:hover:before {
	transform: rotateX(90deg);
}
Demo Single

Penjelasan:

  • Perspective pada baris 2 akan menjadi sudut pandang dari efek 3D, semakin kecil nilainyya maka akan semakin tampak efek 3D nya.
  • Baris 26 akan membuat posisi awal element :after berputar 90° dan baris 16 akan membuatnya berada di posisi bawah.
  • Baris 20 akan membuat element before berada di depan element after
  • Ketika terjadi event :hover, baris 31 akan memutar element :before keatas, baris 34 membuat element :after berputar kedepan, dan baris 30 akan membuat element :after berada di depan element :before.

5. Efek 5: Membuat efek flip pada icon dengan cssTop

Efek ini akan membuat element bergerak dengan sumbu tertentu (flip) ke belakang. Untuk membuat efek ini diperlukan element:

  1. Element <a> yang berperan sebagai container (secara visual tidak kelihatan) dan sebagai perspective 3d untuk element :before dan :after.
  2. Pseudo element :before dengan icon berwarna abu-abu dan background berwarna abu-abu terang
  3. Pseudo element :after dengan icon berwarna putih dan background berwarna coklat.

Transisi element tampak seperti contoh berikut:

contoh untuk beberapa set icon:

Pada contoh diatas, element dengan border berwarna merah adalah element <a>, yang berwarna biru adalah element :before, dan yang berwarna hijau (ketika :hover) adalah element :after. Kode HTML yang diperlukan:

<a class="instagram" href="#"></a>

sedangkan kode css yang diperlukan:

.effect-raw .instagram {
	background: none;
	overflow: visible;
	perspective: 300px;
}
.effect-raw .instagram:before,
.effect-raw .instagram:after {
	content: "f16d";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
    height: 100%;
}
.effect-raw .instagram:before {
	background-color: #EAEAEA;
	-webkit-transform-origin-y: 100%;
}
.effect-raw .instagram:after {
	background-color:#DCAD65;
	color: #FFFFFF;
	opacity: 0;
	z-index:1;
	transform: rotateX(-90deg);
	-webkit-transform-origin-y: 100%;
}
.effect-raw .instagram:hover:before{
	transform: rotateX(90deg);
}
.effect-raw .instagram:hover:after{
	transform: rotateX(0);
	opacity: 1;
}
Demo Single

Penjelasan:

  1. Properti perspective pada baris 3 digunakan sebagai sudut pemutaran element :before dan :after
  2. Baris 17 digunakan sebagai sudut pemutaran element :before
  3. Baris 24 digunakan sebagai sudut pemutaran element :after dan baris 25 merupakan posisi awal element :after (berputar 90° berlawanan arah jarum jam)
  4. Ketika terjadi event :hover, baris 28 digunakan untuk memutar element :before 90° searah jarum jam dan baris 32 untuk memutar element :after 90° searah jarum jam

6. Efek 6: Membuat efek icon berputar dengan cssTop

Efek ini akan membuat icon berputar 360° sebanyak satu kali. Element yang kita gunakan adalah anchor <a> dan pseduo element :before, element <a> kita gunakan sebagai background sedangkan element :before berisi icon.

Transisi element seperti tampak pada contoh berikut:

Contoh untuk beberapa set icon:

Pada contoh diatas, element dengan border warna biru adalah element :before dan yang berwarna merah adalah element <a>.

Kode HTML yang kita gunakan:

<a class="twitter" href="#"></a>

sedangkan css yang kita gunakan:

.twitter {
	background-color: #5FA9FF;
}
.twitter:before {
	color: #FFFFFF;
	content: "f099";
}
.twitter:hover {
	background-color: #2289FF;
}
.twitter:hover:before{
	transform: rotate(360deg);
}
Demo Single

Penjelasan: Ketika terjadi event :hover, maka baris 14 akan merubah warna background pada element <a> dan baris 17 akan membuat element :before berputar 360°.

7. Efek 7: Membuat efek zoom pada icon dengan cssTop

Efek ini hanya merubah warna background dan ukuran font, cukup menggunakan transition, semua perubahan tersebut terlihat halus.

Element yang kita gunakan cukup <a> dan :before. Element <a> berfungsi sebagai background  dan element :before berisi icon. Transisi element seperti contoh berikut:

contoh untuk beberapa set icon:

Pada contoh diatas, element dengan border warna biru adalah element :before dan yang berwarna merah adalah element <a>

Kode HTML yang diperlukan:

<a class="rss" href="#"></a>

Kode css yang diperlukan:

.rss {
	color: #FFFFFF;
	background-color: #FF9F5B;
}
.rss:before {
	color: #FFFFFF;
	content: "f09e";
}
.rss:hover {
	background-color: #FF7F24;
}
.rss:hover:before {
	font-size: 120%;
}
Demo Single

Ketika terjadi event :hover, baris 10 akan mengubah warna background pada element <a> dan baris 13 akan memperbesar ukuran icon.

Efek ini akan tidak maksimal jika menggunakan background gambar, dimana jika gambar di perbesar biasanya akan pecah.

8. Efek 8: Membuat efek perubahan warna pada icon dengan cssTop

Efek ini akan merubah warna pada icon ketika mouse berada di atas icon. Untuk membuatnya kita cukup menggunakan element <a> sebagai background dan :before sebagai icon.

Transisi warna seperti tampak pada contoh berikut:

contoh untuk beberapa set icon:

Pada contoh diatas, element dengan border warna merah adalah element , sedangkan yang berwarna biru adalah element :before Kode HTML yang kita gunakan:

<a class="digg" href="#"></a>

Sedangkan style yang kita perlukan:

.digg {
	background: #757575;
	color: #5D5D5D;
}
.digg:before {
	content: "f1a6";
}
.digg:hover:before {
	color: #79BAFF;
}
Demo Single

Ketika terjadi event :hover baris 9 akan merubah warna icon menjadi biru dan property transition akan membuat perubahan tersebut menjadi halus.

Efek ini akan sulit dilakukan jika kita menggunakan icon berupa gambar, karena warna icon sudah fixed sesuai dengan gambar yang ada.

III. Kesimpulan

Pada bagian satu ini kita membahas beberapa efek yang dapat kita buat hanya dengan menggunakan CSS, diantaranya efek slide dan kubus (3d).

Sobat dapat bereksperimen dengan mengubah nilai yang ada, untuk efek yang lainnya kita bahas pada bagian dua: Membuat 15 Efek Social Media Button Dengan CSS Part II

Recomended Post

12 Feedback dari pembaca

Silakan tinggalkan komentar

*

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  2. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  3. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  4. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  5. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  6. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  7. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  8. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  9. Menghitung Selisih Waktu Dengan PHP – Cara Termudah

  10. Memahami Fungsi Date Pada PHP