
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
.
Tuturial lain yang tak kalah seru, membuat search box icon murni hasil rekonstruksi element HTML dan CSS, lengkap dengan click animasi.
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 ataswidth: 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 garis33x2 piksel
dengan posisinya yang absolut. - Blok code
.left { }
dan.right { }
menampung propertytransform
dengan valuerotate ()
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
danleft
. 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 https://www.w3schools.com/css/css3_flexbox.asp atau ikuti code challenge nomor 2 berikut ini:
CODE CHALLENGE
- Lakukan perubahan nilai pada setiap property
width
danheight
. Lihat apa yang terjadi? - Coba bikin sintak yang sudah kamu pelajari, menjadi code yang lebih sederhana lagi.
Comment
comments powered by Disqus