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:

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 css^Top

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 css^Top

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 css^Top

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 css^Top

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 css^Top

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 css^Top

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 css^Top

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