Home » , » Tutorial HTML: Cara Membuat Button

Tutorial HTML: Cara Membuat Button

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

Output
Baca Juga: Tutorial Belajar HTML - Tag Anchor

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
Iklan

0 comments :

Posting Komentar