Mengenal HTML dan CSS: Cara Mudah Membuat Tombol Interaktif untuk Pemula

Mengenal HTML dan CSS: Cara Mudah Membuat Tombol Interaktif untuk Pemula

Apakah Anda pernah bertanya-tanya bagaimana tombol di sebuah website bisa berubah warna atau memiliki efek saat disentuh kursor? Itu adalah perpaduan sederhana antara HTML dan CSS, dua bahasa dasar yang wajib dikuasai oleh setiap pengembang web.

HTML (HyperText Markup Language) berfungsi sebagai "tulang" yang menyusun struktur halaman web, sementara CSS (Cascading Style Sheets) adalah "kulit" yang memberikan tampilan visual, warna, dan gaya. Bersama-sama, keduanya bisa menciptakan elemen-elemen yang tidak hanya berfungsi, tetapi juga menarik secara visual.

Dalam artikel ini, kita akan membuat sebuah tombol sederhana yang tidak hanya memiliki tampilan menarik, tetapi juga memberikan efek interaktif saat kursor diarahkan padanya.

Langkah 1: Membuat Struktur Dasar dengan HTML

Pertama-tama, kita akan membuat elemen tombolnya. Buka editor kode Anda dan buat file HTML baru. Ketikkan kode berikut.

<button class="tombol-saya">Klik Saya</button>

• <button>: Ini adalah tag HTML yang menciptakan elemen tombol.
• class="tombol-saya": Atribut ini memberikan "nama kelas" pada tombol, sehingga kita bisa memanggilnya di file CSS untuk memberikan gaya.

Langkah 2: Memberikan Gaya dengan CSS

Sekarang, buat file baru di folder yang sama dan beri nama style.css. Di sinilah kita akan memberikan "nyawa" pada tombol agar tidak terlihat membosankan.

Salin kode CSS berikut dan tempelkan di file style.css.

.tombol-saya {
    /* Mengatur Tampilan */
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;

    /* Mengatur Warna dan Bentuk */
    color: white;
    background-color: #007bff; /* Warna biru */
    border: none;
    border-radius: 8px; /* Sudut membulat */
    transition: background-color 0.3s ease; /* Transisi halus saat perubahan */
}

Langkah 3: Membuat Efek Interaktif

Ini adalah bagian terpenting. Dengan menggunakan pseudo-class :hover, kita bisa mengubah gaya tombol saat kursor mouse berada di atasnya.

Tambahkan kode ini di bagian bawah file style.css yang sudah Anda buat.

.tombol-saya:hover {
    background-color: #0056b3; /* Warna biru yang lebih gelap */
    transform: translateY(-2px); /* Menggeser tombol sedikit ke atas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Setelah Anda menyimpan kedua file, buka file HTML di browser. Anda akan melihat sebuah tombol yang berubah warna dan sedikit terangkat saat disentuh kursor.

Kesimpulan

Selamat! Anda telah berhasil membuat tombol interaktif. Ini adalah contoh sederhana dari kekuatan kombinasi HTML dan CSS.

HTML memberikan strukturnya, CSS memberikan gayanya, dan pseudo-class seperti :hover menambahkan interaktivitas yang membuat pengalaman pengguna menjadi lebih baik. Mulailah bereksperimen dengan properti CSS lainnya untuk menciptakan tombol dengan gaya yang unik dan menarik.