Latihan 1: Buttons & Call-to-Action — UI/UX

Latihan 1 dari materi Buttons & Call-to-Action di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya tiga button, .btn-primary (Simpan), .btn-secondary (Preview), dan .btn-ghost (Batal), dan <style> yang masih kosong. HTML-nya biarkan. Di dalam <style>, tulis tiga aturan:

.btn-primary: background-color: #2563EB, color: white, font-weight: 600. Tambahkan juga border: none (gak dicek).
.btn-secondary: background: transparent, color: #2563EB, dan border: 1px solid #2563EB: cuma garis dan teks.
.btn-ghost: background: transparent, color: #6B7280, dan border: none: cuma teks.

Latar transparan dan garisnya ikut dicek, karena tanpa itu tombol secondary dan ghost masih abu-abu bawaan browser.

Hint

Tiga level, tiga bentuk: primary diisi penuh, secondary cuma garis dan teks, ghost cuma teks.
Tulis tiga aturan di dalam <style>, satu per class. Primary butuh latar, warna teks, dan tebal huruf; secondary dan ghost butuh latar transparan, warna teks, dan garis (ghost tanpa garis).
.btn-primary { background-color: #2563EB; color: white; font-weight: 600; border: none; } .btn-secondary { background: transparent; color: #2563EB; border: 1px solid #2563EB; } .btn-ghost { background: transparent; color: #6B7280; border: none; }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Buttons & Call-to-Action — UI/UX

Hint

Memperbarui Aplikasi