Tombol dalam HTML sering digunakan untuk mengaktifkan fungsi tertentu, seperti mengirimkan formulir, membuka jendela baru, atau mengeksekusi JavaScript. HTML menyediakan beberapa cara untuk membuat tombol yang mudah dan fungsional.
Cara Membuat Button pada HTML
1. Menggunakan Tag <button>
Cara pertama dan paling umum untuk membuat tombol dalam HTML adalah dengan menggunakan tag <button>. Tag ini mudah digunakan dan memungkinkan kita untuk menambahkan konten di dalamnya, seperti teks, ikon, atau bahkan gambar.
Contoh:
<button>Klik Saya</button>Output: Tombol sederhana bertuliskan “Klik Saya”.
2. Menambahkan Atribut ke <button>
Tag <button> juga mendukung beberapa atribut yang dapat menambah fungsi dan estetika tombol, seperti:
- type – Menentukan tipe tombol, seperti
button,submit, ataureset. - id dan class – Untuk styling CSS atau manipulasi DOM dengan JavaScript.
- onclick – Untuk menambahkan aksi ketika tombol diklik.
Contoh:
<button type="button" onclick="alert('Tombol diklik!')">Klik Saya</button>Pada contoh di atas, ketika tombol diklik, sebuah pesan pop-up akan muncul.
3. Menggunakan Tag <input type="button">
Anda juga dapat membuat tombol menggunakan tag <input>, dengan menentukan atribut type="button". Namun, dengan cara ini, hanya teks sederhana yang dapat ditampilkan.
Contoh:
<input type="button" value="Klik Saya">4. Menggunakan Tag <a> sebagai Tombol
Tag <a> (link) dapat diubah tampilannya agar terlihat seperti tombol, terutama dengan bantuan CSS.
Contoh:
<a href="#" class="button">Klik Saya</a>Lalu, gunakan CSS untuk styling:
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
border-radius: 4px;
text-decoration: none;
}5. Menambahkan Gaya pada Tombol
Dengan menggunakan CSS, Anda bisa menambahkan berbagai gaya pada tombol agar terlihat lebih menarik.
Contoh CSS untuk Button:
button {
background-color: #4CAF50; /* Warna latar hijau */
color: white; /* Warna teks */
padding: 10px 20px; /* Padding */
border: none; /* Menghapus border */
border-radius: 5px; /* Membuat sudut tombol melengkung */
cursor: pointer; /* Mengubah kursor menjadi pointer */
}
button:hover {
background-color: #45a049; /* Warna ketika tombol di-hover */
}6. Menggunakan JavaScript untuk Interaksi Tombol
Tombol sering digunakan dengan JavaScript untuk membuat fungsi interaktif pada halaman web. Misalnya, menampilkan atau menyembunyikan konten ketika tombol diklik.
Contoh:
<button onclick="myFunction()">Tampilkan Pesan</button>
<p id="pesan" style="display:none">Halo, ini adalah pesan rahasia!</p>
<script>
function myFunction() {
var x = document.getElementById("pesan");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>Pada contoh ini, teks akan muncul atau menghilang setiap kali tombol diklik.
Berikut adalah contoh kode HTML lengkap dengan CSS untuk membuat tombol yang estetis dan menarik. Tombol ini memiliki efek hover, bayangan, dan tampilan modern.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tombol Estetik di HTML</title>
<style>
/* Gaya dasar halaman */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
/* Gaya container untuk tombol */
.container {
text-align: center;
}
/* Gaya untuk tombol */
.button {
background-color: #4CAF50; /* Warna latar hijau */
color: white; /* Warna teks */
padding: 15px 30px; /* Padding untuk ukuran tombol */
font-size: 18px; /* Ukuran teks */
font-weight: bold;
border: none; /* Menghapus border */
border-radius: 8px; /* Sudut melengkung */
cursor: pointer; /* Kursor berubah menjadi pointer */
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* Bayangan */
transition: all 0.3s ease; /* Efek transisi */
}
/* Efek hover untuk tombol */
.button:hover {
background-color: #45a049; /* Warna lebih gelap saat di-hover */
box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.3); /* Bayangan lebih besar */
transform: translateY(-3px); /* Efek naik saat di-hover */
}
/* Efek aktif saat tombol ditekan */
.button:active {
transform: translateY(2px); /* Sedikit turun saat ditekan */
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih kecil */
}
</style>
</head>
<body>
<div class="container">
<button class="button" onclick="showMessage()">Klik Saya</button>
<p id="message" style="display:none; margin-top: 20px; font-size: 16px;">Halo, ini adalah pesan rahasia!</p>
</div>
<script>
function showMessage() {
var message = document.getElementById("message");
if (message.style.display === "none") {
message.style.display = "block";
} else {
message.style.display = "none";
}
}
</script>
</body>
</html>Kesimpulan
Tabel ringkasan untuk pembuatan button pada HTML:
| Tag | Keterangan | Contoh |
|---|---|---|
<button> | Membuat tombol dengan teks atau ikon | <button>Klik Saya</button> |
<input type="button"> | Membuat tombol sederhana tanpa HTML di dalamnya | <input type="button" value="Klik Saya"> |
<a> sebagai tombol | Mengubah link menjadi tombol dengan CSS | <a href="#" class="button">Klik Saya</a> |
| CSS untuk gaya | Menambahkan gaya untuk estetika tombol | button { background-color: #4CAF50; } |
| JavaScript untuk interaksi | Menambah fungsionalitas tombol | onclick="myFunction()" |