Komponen Button — Tombol CTA di Landing Page

Apa itu: Komponen tombol aksi (Call-to-Action) yang bisa membawa pengunjung ke URL tertentu, scroll ke seksi lain, atau langsung membuka WhatsApp kamu. Kapan pakai: Setiap kali kamu ingin pengunjung melakukan sesuatu — pesan sekarang, hubungi via WA, pelajari lebih lanjut, atau scroll ke form pemesanan.

Apa itu Button?

Button adalah komponen interaktif paling penting di landing page. Setiap landing page yang efektif punya setidaknya satu tombol CTA (Call-to-Action) yang jelas dan mencolok — ini yang mendorong pengunjung dari "lihat-lihat" menjadi "beli".

Di Konvert, Button bukan sekadar tombol biasa. Kamu bisa pilih tiga jenis aksi berbeda, tambahkan ikon, atur efek glow, bahkan lacak klik-nya sebagai event pixel Meta atau Google Tag Manager.

Kapan Pakai Button?

• Hero CTA utama — "Pesan Sekarang", "Beli Sekarang", "Dapatkan Sekarang"
• Scroll ke form — tombol di hero section yang scroll smooth ke order form di bawah
• Hubungi via WhatsApp — langsung buka WA dengan nomor dan pesan yang sudah diisi
• Link ke halaman lain — "Lihat Katalog", "Pelajari Lebih Lanjut"
• Aksi sekunder — "Download Brosur", "Cek Stok"

Properties

Property	Tipe	Default	Penjelasan
Button Text	Teks	"Click Here"	Label yang muncul di tombol.
Variant	Pilihan	Solid	Gaya visual tombol: Solid, Outline, Ghost.
Size	Pilihan	Medium	Ukuran tombol: Small, Medium, Large.
Full Width	Checkbox	false	Tombol memenuhi lebar container.
Action Type	Pilihan	Link	Apa yang terjadi saat tombol diklik.
Icon Type	Pilihan	None	Tambahkan ikon di tombol.
Glow Intensity	Pilihan	None	Efek cahaya di sekitar tombol.
Background Color	Color picker	Warna primer tema	Warna background tombol (support gradient).
Text Color	Color picker	Putih / otomatis	Warna teks label tombol.
Glow Color	Color picker	Sama dengan bg	Warna efek glow.
Pixel Event	Pilihan	(kosong)	Event Meta Pixel yang di-fire saat klik.
GTM Event	Teks	(kosong)	Nama event custom untuk dataLayer GTM.

---

Action Type — 3 Pilihan

1. Link

Tombol membuka URL saat diklik. Cocok untuk mengarahkan ke halaman lain, halaman produk, atau link eksternal.

Field	Penjelasan
URL	Alamat tujuan. Harus diawali https://. Contoh: https://tokopedia.com/toko-kamu

2. Scroll to Section

Tombol akan scroll halaman secara smooth ke komponen target yang kamu pilih di canvas. Ideal untuk hero CTA yang mengarahkan ke order form.

Field	Penjelasan
Target Section	Pilih komponen tujuan dari dropdown (daftar semua komponen di canvas)

3. WhatsApp

Tombol membuka WhatsApp dengan nomor dan pesan yang sudah diisi otomatis. Berguna untuk produk yang butuh konsultasi sebelum beli.

Field	Penjelasan
Nomor WhatsApp	Nomor HP kamu diawali 08 atau 62. Contoh: 08123456789
Template Pesan	Teks pesan yang otomatis muncul di chat WA pengunjung. Bisa berisi nama produk, pertanyaan default, dll.

---

Variant — Gaya Visual Tombol

Variant	Tampilan	Cocok untuk
Solid	Tombol penuh berwarna, teks kontras	CTA utama — paling menonjol
Outline	Hanya border berwarna, background transparan	Aksi sekunder di samping CTA utama
Ghost	Tidak ada border/background, hanya teks	Aksi tersier / link-style

Size

Size	Tinggi kira-kira	Cocok untuk
Small	~32px	Tombol inline, ruang terbatas
Medium	~40px	Default, cocok untuk sebagian besar kasus
Large	~52px	Hero CTA utama yang perlu standout

Full Width

Saat dicentang, tombol melebar hingga memenuhi lebar container (kolom atau halaman). Cocok untuk CTA di mobile yang ingin terlihat besar dan mudah diklik.

---

Icon Type — Tambahkan Ikon

None

Tidak ada ikon — tombol hanya menampilkan teks.

Lucide Icon

Pilih dari ratusan ikon dari library Lucide (search: arrow-right, check, shopping-cart, dll). Ikon vektor bersih, skala dengan ukuran tombol.

Emoji

Sisipkan emoji apa pun via emoji picker. Cocok untuk tombol WhatsApp (🟢 atau ikon WA) atau untuk menambahkan nuansa informal.

Icon Position: Left (sebelum teks) atau Right (setelah teks).

---

Glow Intensity — Efek Cahaya

Menambahkan shadow berwarna di sekitar tombol untuk efek "bersinar". Semakin tinggi intensitas, semakin besar dan terang efeknya.

Nilai	Efek
None	Tidak ada glow
Soft	Glow halus, subtle
Medium	Glow jelas, tampak premium
Strong	Glow kuat, sangat mencolok

---

Pixel Event & GTM Event

Saat tombol diklik, kamu bisa otomatis men-trigger event pelacakan:

Field	Kegunaan
Pixel Event	Fire event ke Meta Pixel (Facebook). Preset: ViewContent, Lead, AddToCart, InitiateCheckout, Purchase, dll.
GTM Event	Push event name custom ke dataLayer Google Tag Manager. Nama bebas (mis. cta_klik_hero, klik_wa).

Berguna untuk melacak pengunjung mana yang aktif berinteraksi — bisa dipakai untuk retargeting iklan.

Style Universal

Button mendukung semua properti style umum (margin, padding, border, radius, shadow, hide on mobile/desktop, custom CSS). Lihat panduan lengkapnya di Style Universal.

Contoh Penggunaan

Contoh 1 — Hero CTA Utama

Tombol besar penuh lebar di hero section, scroll ke order form saat diklik. Glow medium dengan background gradient oranye untuk efek premium. Cocok untuk tombol "Pesan Sekarang" di bagian atas landing page.

Contoh 2 — Tombol WhatsApp dengan Ikon Emoji

Tombol medium dengan emoji WhatsApp 💬 di kiri, action langsung buka WhatsApp dengan template pesan otomatis. Cocok untuk "Tanya dulu" sebelum customer commit beli.

Contoh 3 — Tombol Sekunder (Outline)

Tombol outline (border tanpa fill) di samping CTA utama, untuk aksi "Pelajari Lebih Lanjut" atau "Lihat Detail" yang tidak ingin terlalu dominan visual. Action biasanya Link ke halaman detail produk.

Tips & Gotchas