membuat button berwarna

Cara Membuat Button Berwarna di HTML

Langkah-langkah cara membuat button berwarna di HTML yang keren dan menarik

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.

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 Membuat Button Berwarna di HTML

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!

Cara Membuat Button dengan Berbagai Warna di HTML

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!

membuat button berwarna

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!

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Send this to a friend