ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 12-09-2016

Membuat 15 Efek Social Media Button Dengan CSS Part II

Tutorial ini merupakan bagian kedua dari tutorial membuat 15 efek social media button. Untuk persiapan, penggunaan icon, dan file css awal, sudah kita bahas pada bagian pertama: .Contoh tampilan semua efek:

Jika ingin langung ke pembahasan efek tertentu, silakan di klik salah satu icon diatas, untuk efek 1 s.d 8, halaman akan diarahkan ke tutorial bagian I: 15 Efek Social Media Button Dengan CSS Part I

9. Efek 9: Membuat efek slide up pada background icon dengan cssTop

Ada tiga element utama yang kita gunakan pada efek ini, yaitu:

  1. Element <a> yang berfungsi sebagai element utama dan menjadi background awal.
  2. Pseudo element :before yang hanya berisi icon, tanpa background.
  3. Pseudo element :after dengan dimensi sama persis dengan element <a> dan memiliki background tersendiri yang nantinya akan menjadi background baru.

Pergeseran element tampak seperti berikut ini:

contoh untuk beberapa set icon:

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

Kode HTML yang diperlukan adalah:

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

Sedangakan css rule nya:

.youtube {
	background-color: #EAEAEA;
	border-bottom: 5px solid #949494;
    line-height: 60px;
    height: 59px;
	z-index: 1;
}
.youtube:before {
	content: "f167";
}
.youtube:after {
	background-color: #CF2200;
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
    z-index: -1;
}
.youtube:hover{
	border-color: #921800;
}
.youtube:hover:before{
	color: #FFFFFF;
}
.youtube:hover:after{
	top: 0;
}
Demo Single

Penjelasan:

  • Z-index pada baris 6 berfungsi sebagai dasar untuk z-index element children
  • Baris 15 akan membuat element :after berada di bawah element <a>, dan baris 28 akan membuat element :after bergeser ke atas menutupi element <a>

Perlu diperhatikan bahwa z-index harus kita definisikan dengan benar.

z-index pada element <a> harus lebih besar daripada :after sehingga icon akan tetap terlihat. Efek ini akan sulit di aplikasikan jika background yang kita gunakan berupa gambar.

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

Efek kali ini akan membuat element icon bergeser keatas sehingga tulisan yang ada dibelakangnya akan terlihat. Element yang diperlukan untuk membuat efek ini adalah:

  1. Element <a> yang berfungsi sebagai element utama dengan border bawah yang tebal.
  2. Pseudo element :before yang berisi teks terkait icon.
  3. Pseudo element :after yang berisi icon, dengan dimensi sama persis dengan element <a>.

Transisi element tampak seperti contoh berikut:

contoh untuk penerapan beberapa set icon:

Pada contoh diatas, element dengan border warna hijau merupakan element :after sedangkan yang berwarna biru adalah element :before.

Html yang kita gunakan:

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

sedangkan css yang kita gunakan:

.vimeo {
	border-bottom: 5px solid #4099FF;
	color: #FFFFFF;
	height: 59px;
    line-height: 60px;
	overflow: visible;
}
.vimeo:before,
.vimeo:after {
	background-color: #85C6FD;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.vimeo:before 
{
	content: "Vimeo";
	font-family: arial;
    font-size: 10px;
    line-height: 95px;
    text-transform: uppercase;
}
.vimeo:after {
	content: "f27d";
}
.vimeo:hover:after{
	top: -15px;
}
Demo Single

Penjelasan: baris 29 digunakan untuk menggeser element :after keatas ketika terjadi event :hover

11. Efek 11: membuat animasi ukuran icon dengan cssTop

Element yang diperlukan adalah:

  1. Element <a> yang berfungsi sebagai container dengan background warna tertentu.
  2. Pseudo element :before yang berisi icon.
  3. Pseudo element :after yang juga berisi icon.

Transisi element seperti tampak berikut ini:

Contoh untuk beberapa set icon:

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

HTML yang diperlukan:

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

sedangkan css rule nya:

.delicious {
    line-height: 60px;
	background-color: #EAEAEA;
}
.delicious:before {
	content: "f1a5";
}
.delicious:after {
	background-color: #3F92DC;
	content: "f1a5";
	color: #FFFFFF;
	font-size: 0;
	position: absolute;
	top: 59px;
	left: 0;
	width: 100%;
	height: 5px;
}
.delicious:hover:before{
	font-size: 0;
}
.delicious:hover:after{
	top: 0;
	height: 100%;
	font-size: 100%;
}
Demo Single

Penjelasan:

  1. Baris 12 akan membuat dimensi awal icon pada element :after bernilai 0, baris 14 akan membuat element :after berada dibawah, dan baris 17 akan membuat tinggi awal element :after menjadi 5px.
  2. Ketika terjadi event :hover, line 20 akan membuat dimensi icon pada element :befor menjadi 0, sedangkan baris 24 akan membuat tinggi element :after menjadi sama dengan element <a> dan baris 25 akan membuat icon pada element :after menjadi besar.

12. Efek 12: Membuat efek 3D flip dengan cssTop

Efek ini akan membuat element baru muncul seolah olah berputar dari belakang. Untuk membuat efek ini kita memerlukan element:

  1. Element <a> yang berfungsi sebagai container saja, secara visual tidak kelihatan.
  2. Element <span> yang berfungsi sebagai background.
  3. Pseudo element span:before yang berisi icon awal, tanpa background.
  4. Pseudo element span:after yang berisi icon, dengan background warna tertentu.

Sebenarnya kita bisa membuat efek ini tanpa element <span> namun hasilnya tidak maksimal ketika di buka di browser IE s.d versi 11.

Hal ini disebabkan karena di IE, untuk membuat posisi element menjadi rapi, perlu container, untuk itu kita gunakan element <a> sebagai containernya, element efeknya nya menggunakan element <span> dan span:after.

Transisi element seperti tampak pada contoh berikut:

contoh untuk beberapa set icon:

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

Kode HTML yang diperlukan adalah:

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

sedangkan css rule nya:

.pinterest {
	perspective: 800px;
	overflow: visible;
}
.pinterest span {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #EAEAEA;
	transform-origin: 0 50%;
	transform-style: preserve-3d;
	box-shadow: inset 0 5px #AAAAAA;
}
.pinterest span:before,
.pinterest span:after {
	content: "f231";
}
.pinterest span:after {
	box-shadow: inset 0 5px #8E0F14;
	background-color: #BE2026;
}
.pinterest span:after {
	color: #FFFFFF;
	position:absolute;
	width: 100%;
	height: 100%;
	left:0;
	top:0;
	transform: rotateX(270deg);
	transform-origin: 0 0;
	transition: transform 0.6s;
}
.pinterest:hover span:after{
	transform: rotateX(0);
}
Demo Single

Penjelasan:

  1. Baris 2 digunakan untuk sudat pandang efek 3d, semakin kecil nilainya, semakin jelas efek 3D nya.
  2. Baris 11 dan 12 digunakan sebagai sudut/sumbu putaran untuk element childrennya (element :after) dan agar efek yang dihasilkan berupa 3D.
  3. Baris 30 digunakan untuk mementukan posisi awal dari element :after, yaitu 270° searah jarum jam, dan baris 31 untuk menentukan sumbu putar element :after.
  4. Ketika terjadi event :hover, baris 35 akan membuat element :after berputar kedepan hingga mencapai posisi 0°.

13. Efek 13: Membuat efek zoom in-out pada icon dengan cssTop

Untuk membuat efek ini, element yang kita perlukan adalah:

  1. Element <a> yang berfungsi sebagai container dengan background warna tertentu.
  2. Pseudo element :before yang hanya berisi icon, tanpa background.
  3. Pseudo element :after yang juga berisi icon, namun tanpa background.

Transisi element seperti tampak pada contoh berikut:

contoh untuk beberapa set icon :

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

Kode HTML yang diperlukan adalah:

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

sedangkan css rulenya:

.github {
	background: #757575;
}
.github:after {
    color: #ECFF82;
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: rotate(15deg) scale(1.5);
}
.github:after{
	color: #84FF82;
}
.github:before,
.github:after {
	content: "f113";
}
.github:hover:after {
	transform: rotate(0) scale(1.0);
	opacity: 1;
}
Demo Single

Penjelasan:

  1. Baris 11 akan membuat element :after invisible (tidak tampak) dan baris 12 akan membuat posisi awal dimensi element :after lebih besar 1,5x dari ukuran sebenarnya dan berputar 15°
  2. Ketika terjadi event :hover baris 22 akan membuat dimensi element :after mengecil menjadi ukuran sebenarnya dan berputar ke posisi 0°, sedangkan baris 23 akan membuat element :after menjadi kelihatan (visible).

14. Efek 14: Membuat efek background lingkaran mengecil dengan cssTop

Untuk membuat efek ini, element yang kita perlukan adalah:

  1. Element <a> dengan bentuk lingkaran yang berfungsi sebagai container dengan background warna tertentu.
  2. Pseudo element :before yang hanya berisi icon, tanpa background.
  3. Pseudo element :after yang berfungsi sebagai background baru dengan warna tertentu (tanpa icon).

Transisi element seperti contoh berikut:

sedangkan contoh untuk beberapa set icon:

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

Kode HTML yang diperlukan adalah:

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

sedangkan css rulenya adalah:

.dropbox {
	background-color: #EAEAEA;
	border-radius: 32px;
	font-size: 35px;
	line-height: 65px;
	z-index: 1;
	overflow: visible;
}
.dropbox:after {
	content: '';
	background-color: #0089D1;
	border-radius: 32px;
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform: scale(1.3);
	opacity: 0;
	z-index: -1;
}
.dropbox:before {
	content: "f16b";
}
.dropbox:hover:after {
	transform: scale(1.0);
	opacity: 1;
}
.dropbox:hover:before {
	color: #FFFFFF;
}
.dropbox:hover {
    box-shadow: 0 0 0 7px rgba(0, 137, 209, 0.25);
}
Demo Single

Penjelasan:

  • Baris 3 dan 12 masing-masing akan membuat element <a> dan :after menjadi lingkaran. Angka 32px merupakan setengah dari lebar element <a> yaitu 64px (telah didefinisikan di awal)
  •  Baris 18 akan membuat element :after lebih besar 1.3x dari element <a>.
  • Ketika terjadi event :hover, baris 26 akan membuat dimensi element :after menjadi sama dengan element <a> dan baris 27 akan membuatnya berangsur-angsur kelihatan (visible), sedangkan baris 33 akan membuat element <a> memiliki shadow.

15. Efek 15: Membuat efek background lingkaran membesar dengan cssTop

Sama seperti efek sebelumnya, efek ini akan memunculkan element baru yang seolah olah menjadi background baru. Untuk membuat efek ini, element yang diperlukan adalah:

  1. Element <a> yang berfungsi sebagai container dengan background warna tertentu.
  2. Pseudo element :before yang berisi icon.
  3. Pseudo element :after dengan background warna tertentu, tanpa icon.

Pertama-tama, element <a> dan :after kita bentuk menjadi lingkaran, untuk element :after, kita buat dimensinya menjadi 0, dan kita letakkan posisinya berada di tengah.

Ketika terjadi event :hover, element :after berangsur-angsur muncul dan membesar hingga 100%, selain itu juga muncul shadow pada element <a>.

Transisi element seperti tampak pada contoh berikut:

contoh untuk beberapa set icon:

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

Kode HTML yang diperlukan adalah:

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

sedangkan css rulenya:

.linkedin {
	background-color: #EAEAEA;
	border-radius: 32px;
	font-size: 35px;
	line-height: 65px;
	z-index: 1;
}
.linkedin:before {
	content: "f0e1";
}
.linkedin:after {
	background-color: #4698BD;
	border-radius: 32px;
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
    height: 0;
    z-index: -1;
}
.linkedin:hover {
    box-shadow: 0 0 0 7px rgba(58, 136, 171, 0.15);
}
.linkedin:hover:before {
	color: #FFFFFF;
}
.linkedin:hover:after {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
Demo Single

Penjelasan:

  1. z-index pada baris 6 ditujukan agar children yaitu :after dapat menggunakan z-index, baris 20 akan membuat element :after berada di belakang element :before, sehingga ketika terjadi event :hover, icon pada element :before masih tetap kelihatan.
  2. Baris 3 dan 13 (border-radius: 32px) akan membuat element <a> ada :after menjadi berbentuk lingkaran, angka 32 merupakan setengah dari lebar element <a> yaitu 64.
  3. Baris 16 dan 17 akan membuat element :after berada di tengah-tengah tepat diatas element <a>. Baris 18 dan 19 membuat dimensi element :after menjadi 0.
  4. Ketika terjadi event hover, baris 23 akan membuat shadow pada element <a> yang seolah olah seperti border transparan, baris 26 akan membuat icon menjadi putih, dan baris 29 s.d 32 akan membuat dimensi element :after berangsur-angsur menjadi besar.

Kesimpulan

Pada bagian kedua ini kita bahas berbagai efek transisi seperti zoom in-out, fade, flip, dll.

Sobat dapat bereksperimen dengan mengubah nilai yang ada sehingga sesuai dengan yang dibutuhkan.

Tutorial ini hanya sebagai bahan ide atau referensi saja, dengan berbagai eksperimen dan ide kreativitas, sobat dapat membuat berbagai efek animasi yang menarik yang tidak terbatas.

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail