ButtonsLesson 103Preview gratis
Button on Image
Lesson ini bagian dari How To · Semua level
Ringkasan
Button on image adalah tombol yang diletakkan di atas sebuah gambar, biasanya di tengah atau di sudut. Caranya, gambar dan tombol dibungkus wadah berposition: relative, lalu tombol diposisikan absolute terhadap wadah tersebut. Teknik ini sering dipakai pada hero banner, kartu produk, dan galeri.
Poin kunci
- Wadah pembungkus memakai position: relative sebagai acuan posisi tombol.
- Tombol memakai position: absolute agar dapat diletakkan di atas gambar.
- Kombinasi top/left 50% dan translate(-50%, -50%) memusatkan tombol secara presisi.
- Gambar dibuat responsif dengan width: 100% dan display: block.
- Pastikan kontras tombol cukup terhadap area gambar di belakangnya.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.