Button merupakan salah satu element di HTML yang mungkin sering Anda jumpai pada sebuah website. Biasanya element ini digunakan pada submit form ataupun lainnya. Button biasa disebut sebagai tombol. Agar website yang Anda bangun lebih terlihat menarik, maka Anda harus memperhatikan hal-hal kecil yang dapat menunjang keindahan website Anda, salah satunya adalah button.
Cara Membuat Button Berwarna di HTML
Ada beberapa cara dalam membuat button berwarna di HTML, tapi sebenarnya intinya sama yaitu sama-sama menggunakan CSS hanya propery nya saja yang berbeda-beda agar tampilan button lebih menarik. Langsung saja berikut ini beberapa cara yang bisa Anda gunakan untuk membuat button berwarna di HTML.
[ez-toc]
1. Cara Pertama
Membuat button atau tombol berwarna di HTML sangatlah mudah. Anda hanya perlu menggunakan CSS. Anda bisa menggunakan tag CSS terpisah atau bisa Anda gabungkan dengan tag <button> saja. Berikut ini adalah contoh membuat button berwarna yang sangat simpel dan sederhana hanya menambahkan CSS pada tag <button> saja.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Button Berwarna Di HTML</title>
</head>
<body>
<button style="background-color:blue;">Tombol</button>
</body>
</html>Bisa Anda lihat pada script atau kode di atas, untuk membuat warna pada button Anda hanya menambahkan atribut background-color diikuti dengan warna yang Anda inginkan dan tentunya dengan menambahakn tag style di dalamnya. Cara ini termasuk cara yang paling sederhana, karena hanya membuat button berwarna tanpa menambahkan atribut-atribut lainnya.
Gambar di bawah ini adalah hasil dari tampilan script atau kode di atas.
Cara pertama ini cocok untuk Anda yang hanya memang ingin mengubah warna saja. Selamat mencoba!
2. Cara Kedua
Cara kedua yang bisa Anda gunakan untuk membuat button atau tombol berwarna di HTML adalah tetap menggunakan CSS tapi dengan menambahkan tambahakn property lainnya yang dapat membuat tombol Anda terlihat lebih menarik. Berikut ini contoh script atau kode CSS yang bisa Anda tambahkan untuk membuat tombol Anda lebih cantik.
<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>Adapaun penjelasan dari script atau kode di atas adalah:
- .btn2 adalah selector class yang akan memilih tag HTML yang memiliki class btn2, jika ada tag HTML yang memiliki class tersebut maka akan dipilih.
- background-color digunakan untuk mengatur warna dari tombol HTML
- border digunakan untuk membuat border atau garis batas pada tombol. Border ini dapat Anda tambahkan seperti border-top, border-left, border-bottom, dan juga border-right. Sesuaikan saja dengan keinginan Anda.
- color digunakan untuk memberikan warna pada tulisan yang ada pada tombol
- padding digunakan untuk mengatur jarak antara konten dan border. Sebagai contoh 15 px 32 px, itu artinya jarak atas dan bawah sebesar 15 px, sedangkan jarak kanan dan kiri sebesar 32 px.
- text-align digunakan untuk mengatur posisi tulisan atau konten yang ada di dalam tombol
- text-decoration digunakan untuk mengatur dekorasi pada tulisan yang ada di dalam tombol
- display
- font-size digunakan untuk mengatur besar ukuran text dalam tombol
- margin digunakan untuk mengatur jarak di sisi luar antar element. Contoh pada script margin: 4px 2px; artinya jarak sisi luar atas dan bawah masing-masing sebesar 4px, sedangkan jarak sisi luar kanan dan kiri masing-masing sebesar 2px.
- cursor digunakan untuk mendefinisikan tipe cursor (Pointer Mouse) yang ingin Ada ubah, jadi saat cursor Anda mengarah ke button maka kursor akan berubah sesuai yang sudah Anda tentukan.
- btn2:hover akan memberi efek hover (ketika mouse berada pada element tersebut). Pada contoh ini tombol akan memberi efek opacity sebesar 0.9.
Setelah Anda memasukkan script tersebut, jangan lupa pada tag button Anda masukkan class=”btn2″. Seperti script di bawah ini.
<body>
<button class="btn2">Tombol</button>
</body>Gambar di bawah ini adalah hasil dari tampilan script di atas. Selamat mencoba!
3. Cara Ketiga
Tidak ada perbedaan yang sangat mencolok dibandingkan dengan cara-cara yang sebelumnya. Perbedaannya hanya di bagian property saja. Jika Anda ingin menambahkan shadow atau bayangan pada tombol, Anda juga bisa menggunakan CSS. Berikut ini script atau kode CSS yang bisa Anda gunakan.
<style>
.btn_style{
border: 1px solid #cecece;
border-radius: 3px;
padding: 3px 10px;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
color: white;
background-color: red;
}
.btn_style:hover{
border: 1px solid #b1b1b1;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
</style>Penjelasan:
- box-shadow digunakan untuk membuat bayangan atau shadow pada tombol
- .btn_style:hover{border} akan memberikan efek hover berupa border saat Anda mengarahkan mouse ke button, begitu juga dengan box-shadow yang akan memberikan efek bayangan yang agak lebih besar saat Anda mengarahkan mouse ke button
Jangan lupa, pada bagian tag <button> masukkan juga class yang sesuai yang ada di tag <style>. Seperti contoh script di bawah ini.
<body>
<button class="btn_style">Tombol</button>
</body>Gambar di bawah ini adalah hasil dari tampilan script di atas. Selamat mencoba!
Sekian artikel kali ini yang membahas tentang bagaimana cara membuat button berwarna di HTML. Silakan Anda gunakan cara yang sesuai dengan keinginan Anda. Terimakasih. Selamat mencoba!
Editor: Muchammad Zakaria
Download berbagai jenis aplikasi terbaru, mulai dari aplikasi windows, android, driver dan sistem operasi secara gratis hanya di Nesabamedia.com:
Si pecinta hujan dan penikmat kopi yang suka duduk dalam lamunan sambil menghayal mimpi – mimpinya yang akan menjadi kenyataan.