Pada artikel kali ini, kita akan membahas bagaimana cara membuat button atau tombol pada HTML.
Biasanya kita menemui button ketika mengisi formulir online. Selain untuk men-submit formulir. Button bisa digunakan untuk mereset input yang dilakukan oleh user.
Berikut ini adalah langkah-langkah, struktur, kode CSS, dan juga penggunaaanya.
1. Struktur Button pada HTML
Seperti elemen lain pada HTML untuk membuat button diperlukan tag button
Berikut adalah contoh struktur tag <button>:
<button>Tombol</button>
Jika digabungkan dengan struktur lengkap HTML menjadi:
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tombol HTML</title>
</head>
<body>
<button>Tombol</button>
</body>
</html>
adapun cara lain untuk membuat button selain dengan tag <button>. Yaitu dengan tag <input>. Berikut contohnya:
<input type="submit" value="Tombol" />
Kedua cara diatas akan menghasilkan output sebagai berikut
2. Atribut Button
Selain menggunakan tag <button>, kita juga bisa menambahkan atribut untuk memberi gaya ataupun fungsi tertentu. Berikut adalah beberapa atribut button yang sering digunakan:
- class: menambahkan kelas pada button
- id: menambahkan id unik pada button
- disabled: membuat button tidak bisa diklik
- onclick: menentukan fungsi atau tindakan yang akan dilakukan saat button diklik
Berikut penggunaan atribut pada button:
<button class="btn-primary" id="firstButton" onclick="myFunction()">Tombol</button>
3. CSS Button
Berikut contoh penggunaan CSS untun semua tag <button>
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tombol HTML</title>
<style>
button{
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 10px;
}
</style>
</head>
<body>
<button>Tombol</button>
</body>
</html>
Selain itu, kita juga bisa mengubah warna atau bentuk button saat pengguna mengarahkan kursor ke button. Berikut adalah contoh untuk.mengubah warna latar menjadi merah saat pengguna mengarahkan kursor ke button:
button:hover{
background-color: red;
}
sehingga menjadi:
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tombol HTML</title>
<style>
button{
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 10px;
}
button:hover{
background-color: red;
}
</style>
</head>
<body>
<button>Tombol</button>
</body>
</html>
Penambahan kode CSS di atas akan membuat button menjadi seperti berikut:
4. Kombinasi dengan JavaScript
Button pada HTML juga dapat dikombinasikan dengan JavaScript untuk memberikan respon ketika button diklik. Berikut ini cara memberi alert ketika tombol diklik:
<script>
function alertSaatDiKlik(){
alert("Tombol telah diklik");
}
</script>
Kamu bisa meletakkan kode diatas sebelum tag </body>.
Cukup sekian tutorial tentang bagaimana cara menambahkan button atau tombol pada HTML. Selamat mencoba.
Baca Juga: Apa itu HTML, Tanpanya Internet Seperti Apa
Posting Komentar
0Komentar