.jpeg "Cara Membuat Button di Html")
Di dalam sebuah website, tombol sangatlah penting. Karena fungsi dari tombol di sebuah website adalah untuk menginput form. Cara untuk membuat button dengan Html bisa berbagai cara. Kita bisa menggunakan tag <button>. Berikut ini adalah cara menggunakan tag <button> untuk membuat tombol.
Hasilnya seperti dibawah ini.
Tombol diatas jika diklik tidak memiliki aksi apapun karena belum kita berikan attribut. Sekarang kita akan memberikan attribut berupa hyperlink. Untuk menambahkan atribut hyperlink, kita bisa menggunakan tag <a href="linktautan">. Berikut ini adalah contoh penulisan kodingan nya.
Hasilnya seperti dibawah ini
Selain menggunakan tag <button>, kita bisa menggunakan tag <input>. <input> memiliki 2 tipe, yaitu submit dan reset Berikut ini adalah cara membuat tombol menggunakan tag <input>.
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Tombol Dengan Tag Button </title>
</head>
<body>
<button> Tombol </button>
</body>
</html>
Tombol diatas jika diklik tidak memiliki aksi apapun karena belum kita berikan attribut. Sekarang kita akan memberikan attribut berupa hyperlink. Untuk menambahkan atribut hyperlink, kita bisa menggunakan tag <a href="linktautan">. Berikut ini adalah contoh penulisan kodingan nya.
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Tombol Dengan Tag Button </title>
</head>
<body>
<button><a href="https://freezegans.blogspot.com">Tombol</a></button>
</body>
</html>
Selain menggunakan tag <button>, kita bisa menggunakan tag <input>. <input> memiliki 2 tipe, yaitu submit dan reset Berikut ini adalah cara membuat tombol menggunakan tag <input>.
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Tombol Dengan Tag Input </title>
</head>
<body>
<input type="submit" value="Submit Button">
<input type="reset" value="Reset Button">
</body>
</html>
Hasilnya seperti dibawah ini
Dalam kodingan diatas, kita menggunakan 2 tipe yaitu submit dan reset. Namun tahukah kamu perbedaan antara tipe submit dan reset ?
Perbedaan antara submit dan reset adalah jika Submit untuk mengirim data yang diinput di dalam form dan akan di proses dengan suatu script tertentu. Sedangkan reset digunakan untuk mengosongkan kembali form yang telah diisi.
Selain menggunakan tag <button> dan tag <input>, kita juga bisa membuat tombol menggunakan tag <a></a>. Selain dijadikan sebagai hyperlink, tag <a> juga bisa dijadikan untuk membuat tombol. Jika kita menggunakan tag <a> untuk membuat tombol, kita harus menambahkan sedikit kodingan css agar tampilan nya lebih menarik. Mari kita lihat perbedaan nya jika tag <a> biasa dengan tag <a> yang ditambahkan codingan css.
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Tombol Dengan Tag a </title>
</head>
<body>
<a href="https://freezegans.blogspot.com"> Tombol </a>
</body>
</html>
Tombol
Diatas merupakan contoh penggunaan tag <a> untuk membuat button, namun tanpa tambahan codingan css. Jadi tanpa codingan css, terlihat seperti tulisan biasa.
Artikel Menarik Lainnya :
Jika kamu ingin menambahkan codingan css, kamu bisa menggunakan codingan dibawah ini.
.css {
background-color: #ffffff;
border-radius: 3px;
border: solid #0000ff;
text-decoration: none;
padding: 10px;
}
Fungsi background-color adalah untuk memberikan warna background pada tombol dan kode #ffffff adalah kode warna putih. Jadi background tombolnya adalah warna putih.
Fungsi border-radius adalah agar sudut tombol memiliki sedikit lengkungan, jadi sudut tombol tidak berbentuk kotak.
Fungsi border adalah untuk memberikan border (warna pinggir). Kemudian untuk menambahkan warna gunakan solid beserta kode warna, #0000ff adalah kode warna biru.
Fungsi text-decoration adalah menghilangkan garis bawah yang terdapat pada tombol.
Fungsi padding adalah untuk memberikan jarak antara tulisan tombol dengan border.
Codingan diatas tinggal kamu gabungkan dengan codingan html diatas. Jika kamu tidak mengetahui cara menggabungkan codingan html dan css, kamu bisa ikuti contoh codingan dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Tombol Dengan Tag a </title>
<style>
.css {
background-color: #ffffff;
border-radius: 3px;
border: solid #0000ff;
text-decoration: none;
padding: 10px;
}
</style>
</head>
<body>
<a href="https://freezegans.blogspot.com" class="css"> Tombol </a>
</body>
</html>Hasilnya seperti dibawah ini