Cara Membuat Button Responsive dengan HTML

0
Cara Membuat Button Responsive dengan HTML

Cara Membuat Button Responsive dengan HTML - Tombol adalah salah satu elemen dasar dalam desain web yang memungkinkan pengguna untuk berinteraksi dengan situs web. Namun, dalam dunia yang semakin mobile, penting untuk memastikan bahwa tombol-tombol tersebut responsif, artinya mereka dapat menyesuaikan ukuran dan tata letaknya dengan baik di berbagai perangkat dan layar. Dalam artikel ini, kita akan membahas cara membuat tombol responsif menggunakan HTML.

1. Menyiapkan Struktur Dasar HTML

Mulailah dengan membuat struktur dasar HTML untuk halaman web Anda. Ini akan mencakup elemen-elemen seperti <html>, <head>, <title>, dan <body>.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tombol Responsif</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <!-- Isi konten di sini -->

</body>

</html>

Pastikan untuk menyertakan tag <meta viewport> untuk mengatur tampilan responsif pada perangkat mobile.

2. Membuat Tombol dengan HTML

Tambahkan elemen <button> di dalam <body> untuk membuat tombol.
<button class="btn">Klik Saya</button>

3. Gaya Tombol dengan CSS

Tambahkan gaya CSS di dalam tag <style> atau dengan menggunakan file eksternal CSS.
.btn {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
}

/* Responsif: Ubah ukuran tombol untuk perangkat mobile */
@media only screen and (max-width: 600px) {
    .btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}
Dalam contoh ini, kita menggunakan media query CSS untuk mengubah ukuran tombol ketika lebar layar mencapai atau kurang dari 600 piksel, yang cocok untuk perangkat mobile.

4. Uji Coba Responsifitas Tombol

Simpan semua perubahan dan buka halaman HTML Anda di berbagai perangkat dan lebar layar untuk memastikan bahwa tombol tersebut responsif dan tetap terlihat baik di setiap perangkat.

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat tombol responsif yang akan menyesuaikan ukurannya dengan baik di berbagai perangkat, meningkatkan pengalaman pengguna dan membuat situs web Anda lebih mudah diakses oleh pengguna di mana pun mereka berada.


Lebih baru Lebih lama