Cara membuat 'close button icon' dengan HTML dan CSS

Ada icon hamburger menu, ada juga tombol ‘icon close’ untuk menutup kembali listing menu.

Sebelumnya sudah ada tutorial singkat cara simpel membuat icon menu hamburger website.

Cara membuat icon close button tidak jauh berbeda dengan tutorial sebelumnya. Yaitu dengan cara memanipulasi element HTML itu sendiri dengan style CSS.

Cara Pertama

Selalu mengawali dengan cara newbie dulu.

Ketik sintak HTML dasar seperti berikut ini, sekalian dengan nama identifier class CSS nya.

<div class="btn pointer grid">
	<div class="cross-red"></div>
	<div class="cross-black"></div>
</div>

Dari tiga baris kode di atas, pasti sudah terbayang bentuknya kira-kira seperti apa?

Class grid sendiri sebagai class bantuan pembentuk garis grid, agar waktu running kode-nya akan memperjelas bentuk tombolnya.

Kemudian tambahkan style CSS berikut ini:

/* # CARA PERTAMA */
.btn {
	width: 32px;
	height: 32px;
	position: relative;
}

.pointer {
	cursor: pointer;
}

.cross-red {
	position: absolute;
	height: 33px;
	width: 2px;
	background-color: red;
	left: 15px;
	transform: rotate(45deg);
}

.cross-black {
	position: absolute;
	height: 33px;
	width: 2px;
	background-color: black;
	left: 15px;
	transform: rotate(-45deg);
}

Blok code CSS pertama .btn { width: 32px; height: 32px; position: relative; } untuk membentuk sebuah kotak dengan ukuran 32 x 32 pixel yang akan menampung isi dari garis silang.

Kemudian, perilaku kotak diberi posisi position: relative;, apa pun isi yang akan ditampung si kotak akan terisi/mengacu ke dalam kotak, bukan di luar kotak. Kotak sebagai parent, garis sebagai children.

Lanjut ke class .pointer { cursor: pointer; } untuk merubah pointer mouse menjadi icon klik. Sebenarnya, style cursor: pointer; bisa langsung ditambah ke dalam class btn. InsertApps lebih menyukai penulisan sintak class mutable, yang terpisah, sehingga bisa dipakai ditempat lain.

.cross-red {
	position: absolute;
	height: 33px;
	width: 2px;
	background-color: red;
	left: 15px;
	transform: rotate(45deg);
}

.cross-black {
	position: absolute;
	height: 33px;
	width: 2px;
	background-color: black;
	left: 15px;
	transform: rotate(-45deg);
}

Pada kedua class .cross-red dan .cross-black menciptakan sebuah objek garis dengan ukuran panjang 33px x 2px. Kedua style garis sama, yang berbeda cuma style transform: rotate(); yang satu miring 45° dan satunya kebalikan dari -45°.

Kedua garis silang, perilaku posisinya dibuat position: absolute; ke position: relative nya si kotak, class .btn.

Dengan adanya style position: absolute; maka perilaku objek garis, bisa disematkan style left: 15px;. Yang artinya, objek garis bisa digeser posisinya, dari sisi paling kiri layar sejauh 15 piksel ke kanan.

Kenapa harus ada pergeseran posisi di objek garis?

Pada saat cross-red dan cross-black dibuat miring, maka titik nol garis miring berada di tengah. Maka, posisi titik nol garis yang miring harus digeser sejauh 15px untuk mencapai posisi center dalam kotak. Karena ukuran kotak 32px dibagi 15px masih ada selisih 2px sebagai ruang, karena tinggi garis height: 33px; yang dimiringkan jadi lebih panjang.

Selain itu, warna garis sengaja dibuat berbeda warna, agar yang masih newbie bisa lebih paham.

Hasilnya kodingnya lihat Demo

Cara Kedua

Cara ini memanfaatkan CSS Flexbox (Flexible Layout), pengaturan layout tombol close icon secara automatis. Kebalikan dari cara pertama, tata letak pergeseran garis silang dilakukan secara manual.

Bentuk tag HTML masih sama dengan cara pertama.

<div class="box pointer grid">
	<div class="cross left"></div>
	<div class="cross right"></div>
</div>

Untuk kasus kedua, penamaan class btn InsertApps ganti dengan nama class box karena model DEMO dibuat satu file, sehingga tidak terjadi benturan class.

Di bagian CSS pada dasarnya sama, yang berbeda cuma CSS property dan value-nya saja. Sedangkan bentuk penulisan kode CSS, menggunakan konsep modular—tidak mengulangi pengetikan kode yang sama secara berulang-ulang, seperti cara yang pertama.

.box {
	width: 2rem;
	height: 2rem;
	position: relative;
	/* Add flexbox property*/
	display: flex;
	align-items: center;
	justify-content: center;
}

.cross {
	position: absolute;
	height: 30px;
	width: 2px;
	background-color: red;
}

.left {
	transform: rotate(45deg);
}

.right {
	transform: rotate(-45deg);
}

.pointer {
	cursor: pointer;
}

Penjelasan kode:

• Blok code .box { } dengan tiga property yang paling atas width: 2rem; height: 2rem; position: relative; fungsinya sama dengan cara yang pertama, membuat sebuah kotak.
• Tiga property tambahan display: flex; align-items: center; justify-content: center;, kotak yang di render akan mendapatkan tambahan perilaku flexible layout. Jadi, isi yang ditampung si kotak posisinya bersifat fleksibel.
• Blok code .cross { } fungsinya juga masih sama, menciptakan sebuah objek garis 33x2 piksel dengan posisinya yang absolut.
• Blok code .left { } dan .right { } menampung property transform dengan value rotate () untuk memutar sebuah objek sesuai dengan nilai derajat yang input.
• Block code .pointer { } untuk merubah pointer mouse menjadi icon tangan.

Hasilnya Demo

BONUS: Add effect

Menambah efek animasi yang sederhana pada saat mouse diarahkan ke tombol.

Tambahkan class animation di tag HTML.

<div class="box pointer animation">
	<div class="cross left"></div>
	<div class="cross right"></div>
</div>

Code CSS untuk class animation:

.animation:hover {
	transform: rotate(360deg);
	transition: ease-in-out 1s;
}

Hasilnya Demo

CONCLUSION

Dari kedua cara yang digunakan untuk membuat sebuah ‘close button icon’ dengan memanipulasi tag HTML dan CSS, mana yang lebih tepat:

• Apapun caranya, yang penting hasilnya berjalan dengan baik.
• Kekurangan dari cara pertama, hasil akhir dari sebuah tombol close icon, sedikit kurang presisi, karena pengaturan layout tombolnya, berdasarkan nilai width, height dan left. Bila nilai tersebut berubah, maka posisi isi dalam tombol tidak bergerak secara dinamis. (Untuk melihat perubahan, coba ikuti code challenge normor 2)
• Dengan memanfaatkan fitur CSS Flexbox, kekurangan cara pertama dapat diselesaikan dengan baik.
• Hasil akhir cara kedua, renderin garis dan tata letaknya lebih presisi, karena kalkulasi perhitungan dilakukan auto sistem browser.
• Untuk lebih memahami Flexbox, baca lagi dokumentasi di w3schools.com atau ikuti code challenge nomor 2 berikut ini:

CODE CHALLENGE

1. Lakukan perubahan nilai pada setiap property width dan height. Lihat apa yang terjadi?
2. Coba bikin sintak yang sudah kamu pelajari, menjadi code yang lebih sederhana lagi.