Pendahuluan
Selain menyesuaikan ukuran tombol yang dirender agar sesuai dengan desain situs, Anda dapat menggunakan HTML untuk melakukan berbagai hal seperti menampilkan blog, memasukkan gambar ke dalam Blog, atau memasukkan audio / video ke dalam halaman Blog / website.
Untuk membuat tombol atau button dengan gaya/setelan khusus, Anda perlu menambahkan elemen yang berisi perintah-perintah tertentu seperti warna tombol, warna teks dari tombol tersebut, atau letak dari tombol ke dalam kode CSS ataupun html. Gambar di atas adalah contoh tombol yang menentukan parameter gaya khusus yang akan kita coba pelajari saat ini, yaitu merubah ukuran tombol sesuai dengan yang diinginkan.
Membangun tombol dengan grafik khusus
Anda dapat membuat tombol agar sesuai dengan desain situs Anda. Akan tetapi, Anda harus tetap memperhatikan bagaimana tombol tersebut dapat dengan mudah terbaca atau dilihat dengan orang berkebutuhan khusus, mudah dipahami serta memiliki nama yang dapat diakses pembaca layar dan teknologi bantuan lainnya seperti voice reader, AI (Artificial Intelegence) maupun keyboard itu sendiri.
Untuk membuat tombol agar sesuai dengan desain situs Anda, Anda mungkin perlu mengatur posisi dan ukuran dari tombol tersebut dengan tujuan mempermudah pengunjung dalam mengaksesnya. Ukuran tombol sangat penting untuk direncanakan terlebih dahulu guna mempermudah pengunjung yang memiliki kebiasaan tertentu seperti orang yang lebih sering menggunakan smartphone dengan tangan kiri atau kanan ataupun dengan tujuan estetika.
Format Umum
Format umum penggunaan jenis ini adalah:
<button>Ruang Makan</button>
Isi label dari button / tombol di atas sangat jelas yaitu "Ruang Makan", yang menunjukkan bahwa tombol tersebut menuju ruang makan (Sebagai contoh).
Mengatur Ukuran Tombol
Ukuran tombol pada halaman web dapat disesuaikan sesuai dengan apa yang kita inginkan dengan cara menambahkan kode pada HTML itu sendiri atau dengan menambahkan pada kode CSS. Pada kode CSS, agar tombol dapat sesuai dengan ukuran yang kita inginkan, kita perlu menambahkan perintah yang berfungsi untuk mengatur tinggi serta lebar dan diberikan nilai dengan satuan tertentu sesuai kebutuhan, seperti px, em, rem, persen (%) dan lainnya. Berikut adalah contoh dari penerapannya:
Berikut adalah contoh script kode penerapannya:
Menggunakan Properti CSS width dan height
Anda dapat mengatur ukuran tombol menggunakan properti CSS width dan height. Ini memungkinkan Anda untuk menentukan lebar dan tinggi tombol secara langsung.
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<title>Contoh Tombol</title>
<style>
/* Style Button */
.btn {
width: 115px; /* Lebar tombol */
height: 50px; /* Tinggi tombol */
}
<style>
</head>
<!--[ <body> open ]-->
<body>
<button class="btn">Klik Saya</button>
</body>
<!--[ </body> close ]-->
</html>
Menggunakan Properti CSS padding dan font-size
Selain mengatur ukuran secara langsung, Anda juga dapat menggunakan properti CSS padding untuk menambahkan ruang tambahan di sekitar teks tombol dan font-size untuk mengatur ukuran teks dalam tombol.
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<title>Contoh Tombol</title>
<style>
/* Style Button */
.btn {
padding: 10px 20px; /* Padding atas-bawah 10px, kiri-kanan 20px */
font-size: 16px; /* Ukuran tombol */
}
<style>
</head>
<!--[ <body> open ]-->
<body>
<button class="btn">Klik Saya</button>
</body>
<!--[ </body> close ]-->
</html>
Menyesuaikan Ukuran Menggunakan Media Queries
Untuk mendukung responsivitas, Anda dapat menggunakan media queries untuk mengubah ukuran tombol berdasarkan lebar layar atau perangkat.
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<title>Contoh Tombol</title>
<style>
/* Style Button */
.btn {
width: 150px; /* Lebar default */
height: 50px; /* Tinggi default */
}
@media screen and (max-width: 600px) {
.btn {
padding: 100px; /* Mengubah lebar saat layar kurang dari 600px */
font-size: 40px; /* Mengubah tinggi saat layar kurang dari 600px */
}
}
<style>
</head>
<!--[ <body> open ]-->
<body>
<button class="btn">Klik Saya</button>
</body>
<!--[ </body> close ]-->
</html>
Catatan: Dengan menggunakan properti CSS dan HTML yang tepat, Anda dapat mengontrol dengan cermat ukuran tombol dalam desain web Anda, menyesuaikannya dengan kebutuhan dan estetika yang diinginkan.
Prinsip Tombol
Ada beberapa prinsip yang harus diperhatikan dan diterapkan pada suatu tombol atau button, yaitu sebagai berikut:
- Dapat diidentifikasi. Tombol harus menunjukkan bahwa mereka dapat memicu suatu tindakan.
- Dapat ditemukan. Tombol harus mudah ditemukan di antara elemen lain, termasuk tombol lainnya.
- Bersih. Tindakan dan status tombol harus jelas.
Untuk membuat tombol atau button dengan gaya/setelan khusus, Anda perlu menambahkan elemen yang berisi perintah-perintah tertentu seperti warna tombol, warna teks dari tombol tersebut, atau letak dari tombol ke dalam kode CSS ataupun html. Gambar di atas adalah contoh tombol yang menentukan parameter gaya khusus yang akan kita coba pelajari saat ini, yaitu menempatkan button di tengah (center).
Orang lain juga bertanya (FAQ)
- Menggunakan text-align: Cara sederhana dengan properti
text-align: center;. - Menggunakan margin: Memanfaatkan
margin: 0 auto;untuk pusat horizontal. - Menggunakan Flexbox: Menerapkan display flex untuk pengaturan yang lebih fleksibel.
- Menggunakan Grid: Menggunakan CSS Grid untuk penataan tombol di tengah.
Bagaimana cara mengubah warna tombol menggunakan CSS?
Anda dapat mengubah warna tombol dengan properti background-color di CSS.
Apa perbedaan antara Flexbox dan Grid dalam menengahkan tombol?
Flexbox digunakan untuk penataan elemen dalam satu dimensi, sementara Grid mengatur elemen dalam dua dimensi.
Apakah metode ini berfungsi untuk semua jenis tombol?
Ya, metode ini dapat digunakan untuk menengahkan tombol apapun, termasuk tombol HTML biasa dan tombol yang dihasilkan melalui CSS.
Apakah metode ini membuat tombol menjadi responsif?
Responsifitas tombol dapat dicapai dengan teknik tambahan, seperti media queries.
Bagaimana cara mengatur tombol di tengah secara vertikal?
Anda dapat mengatur tombol di tengah vertikal dengan menggunakan teknik Flexbox atau Grid dan properti seperti align-items.