Bagi Anda yang sering membuka website pasti Anda akan menemukan Button. Hal ini dikarenakan Button ini merupakan salah satu element di HTML yang sering dijumpai pada saat membuka sebuah website. Namun, apakah Anda tahu apa itu Button? Button sendiri merupakan tombol yang digunakan untuk memproses data yang telah di input user ke dalam textiled.
Lantas apa fungsi button pada HTML? Button pada HTML pqda dasarnya memiliki 2 fungsi, yakni sebagai submit untuk memproses data input dan reset untuk membatalkan data input. Penggunaan button ini di selaraskan dengan skrip php/javascript.Skrip-skrip tersebut berisi perintah memproses. Seperti data akan diambil nilai lebih dulu kemudian di tampilkan ke data halaman.
Selain itu, bisa juga di proses lebih dulu dengan data lain baru di tampilkan ke halaman. Button ini memiliki nama lain yang mana bisa disebut dengan nama tombol. Selain memiliki fungsi submit dan refresh, button ini memiliki fungsi lainnya loh. Fungsi dari button yang dimaksudkan ialah dapat mempercantik website Anda.
Salah satu caranya adalah memberikan warna pada button. Terdapat beberapa cara membuat button berwarna di html, namun memiliki inti yang sama yakni sama-sama menggunakan CSS. Hanya saja metode atau langkah-langkahnya yang berbeda. Melansir dari website Portal Jawa, berikut ini beberapa cara membuat warna button di html yang dapat Anda coba.
Cara membuat button berwarna di html yang pertama adalah Anda hanya perlu menggunakan CSS. Jadi, dengan cara ini, Anda bisa menggunakan tag CSS terpisah atau Anda juga bisa meggabungkan dengan tag <button> saja. Berikut ini adalah contoh membuat warna biru hanya dengan menambahkan CSS pada tag <button>:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Button Berwarna Di HTML</title>
<head>
<body>
<button style=”background-color-:blue;”>Tombol</button>
</body>
</html>
Jadi jika Anda ingin menggunakan cara ini, Anda hanya perlu menambahkan atribut background-color diikuti dengan warna yang Anda inginkan. Misalnya warna biru dengan menuliskan blue, merah menjadi red, dan seterunya.Cara pertama ini cocok untuk Anda yang hanya ingin mengubah warna button saja. Cara ini juga dikenal sebagai cara paling mudah dan simple dalam membuat warna button di html.
Selain itu, melansir dari website Portal Jawa, Anda juga bisa membuat button atau tombol berwarna di html dengan menggunakan CSS dengan menambahkan property lainnya. Berikut ini contoh script atau kode CSS untuk mengubah warna button agar lebh menarik:
<style>
.btn2 {
background-color: #4CAF50; /*Hijau */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.btn2:hover{
opacity:0.9
}
</style>
Dengan menggunakan cara kedua ini, mungkin ada sebagian dari Anda merasa bingung karena kode-kode yang tidak Anda ketahui. Nah, berikut ini beberapa penjelasan dari script atau kode diatas:
btn 2 adalah selector class yang mana akan memilih tag HTML yang memiliki clas btn 2.
Background-color untuk mengatur warna dari tombol HTML.
Border untuk membuat garis batas. Jadi dengan menggunakan kode ini Anda dapat menambahkan border-top, border-right, border-left hingga border-buttom sesuai keinginan Anda.
color untuk memberikan warna pada button.
Padding untuk mengatur jarak konten dan border.
btn2:hover akan memberikan efek hover.
Setelah Anda memasukkan kode diatas, jangan lupa untuk memasukkan class=“btn2” pada button. Berikut ini contohnya:
<body>
<button class=”btn2”>Tombol</button>
</body>