Thumbnail vs background: kapan pakai yang mana – ZenBlocks buttonBasic
Kesimpulan
**Thumbnail** adalah gambar mandiri di dalam tombol. **Background** adalah lapisan dasar untuk seluruh tombol.
—
Perbandingan
| Kriteria | Thumbnail | Background |
|—|—|—|
| Posisi | Di dalam tombol | Latar tombol keseluruhan |
| Hubungan dengan teks | Sejajar / atas-bawah | Teks berada di atasnya |
| Kontrol ukuran | `Lebar` / `Tinggi` khusus | `Background Ukuran` |
| Hover | Bisa ubah ukuran/posisi | Ubah lewat overlay/warna |
| Video | Tidak | Ya |
| Tumpang tindih | Tidak | Ya |
| Radius | Bisa diatur sendiri | Umumnya ikut radius tombol |
| Responsive | Bisa per perangkat | Bisa per perangkat |—
Panduan penggunaan
### Gunakan thumbnail jika
1. Ingin menampilkan produk/logo spesifik.
2. Butuh komposisi teks + gambar dalam tombol.
3. Ingin styling terpisah untuk gambar.
4. Ingin efek zoom gambar saat hover.### Gunakan background jika
1. Ingin membangun nuansa keseluruhan tombol.
2. Menaruh teks di atas foto dengan overlay.
3. Membutuhkan video background.
4. Ingin beda tampilan `Default/Hover`.### Gunakan keduanya
Bisa digabung:
– background untuk suasana,
– thumbnail untuk visual utama,
– teks CTA untuk aksi.—
Catatan
– Thumbnail memakai `object-fit`; gambar bisa terpotong tergantung rasio.
– Tumpang tindih yang terlalu opak bisa menutupi background.
– Media berat bisa menurunkan performa halaman.—
Pengaturan terkait
– [Pengaturan Thumbnail](../thumbnail/)
– [Pengaturan Latar Belakang](../background/)
– [Pengaturan Tata Letak](../layout/)