Cara Mengubah Warna Tombol pada HTML

Artikel How.com.vn ini akan mengajarkan kepada Anda cara mengubah warna tombol pada HTML. Anda dapat mengubah warna tombol menggunakan kode HTML biasa atau kode CSS (Cascading Style Sheets) pada HTML5.

Metode 1

Metode 1 dari 2:

Menggunakan Kode HTML

Unduh PDF

Teks ini mengawali penanda tombol pada kode HTML. Bagian tubuh HTML adalah area di antara penanda <body> dan </body>. Pada bagian tubuh, elemen-elemen halaman web yang ditambahkan menggunakan HTML dapat terlihat.
Teks tersebut menandakan bahwa terdapat elemen-elemen gaya pada penanda tombol. Semua elemen gaya harus ditambahkan setelah tanda "=".
Semua elemen gaya pada penanda tombol HTML harus diapit oleh tanda kutip.
Elemen ini digunakan untuk mengubah warna latar tombol.
5
Tikkan nama warna atau kode heksadesimal warna setelah "background-color:". Anda bisa mengetikkan nama warna yang diinginkan (dalam bahasa Inggris, mis. “blue”) atau kode heksadesimal warna.
- Untuk menemukan kode heksadesimal, kunjungi https://www.google.com/search?q=color+picker melalui peramban web. Gunakan bilah slider di bawah untuk memilih warna. Setelah itu, gunakan lingkaran pada jendela untuk menentukan corak warna. Tandai dan salin kode 6 digit (termasuk simbol tagar) pada bilah samping kiri, dan tempelkan kode ke penanda tombol.
- Anda juga bisa mengetikkan "transparent" sebagai warna latar tombol.^{[1]XTeliti sumber}
Gunakan titik koma untuk memisahkan setiap elemen gaya pada penanda tombol HTML.
Elemen ini digunakan untuk menentukan warna bingkai di sekitar tombol. Anda dapat menempatkan elemen-elemen gaya dalam urutan apa pun di dalam tanda kutip setelah teks "style=". Namun, setiap elemen gaya harus dipisahkan oleh titik koma (;).
8
Tikkan nama atau kode heksadesimal warna untuk bingkai tombol. Masukkan nama atau kode heksadesimal warna bingkai setelah elemen "border-color:".
- Jika Anda ingin menghapus bingkai, tikkan border:none sebagai pengganti elemen "border-color:".
Gunakan titik koma untuk memisahkan setiap elemen gaya pada penanda tombol HTML.
Elemen ini digunakan untuk mengubah warna teks pada tombol. Anda bisa menempatkan elemen-elemen gaya dalam urutan apa pun di dalam tanda kutip setelah "style=". Namun, setiap elemen harus dipisahkan oleh titik koma (;).
Masukkan nama atau kode heksadesimal warna bingkai setelah elemen "color:". Entri ini menentukan warna teks pada tombol.
Semua elemen gaya harus berada di dalam tanda kutip setelah teks "style=" pada penanda tombol. Setelah selesai menambahkan semua elemen gaya, sisipkan tanda kutip (") di akhir untuk menutup kode elemen gaya.
Penanda pembuka tombol akan ditutup.
Setelah membuat penanda pembuka tombol, masukkan teks yang Anda ingin tampilkan pada tombol setelah penanda pembuka tersebut.
15
Tikkan </button> setelah teks tombol. Elemen tersebut merupakan penanda penutup tombol. Sekarang, tombol Anda telah selesai dibuat. Secara keseluruhan, kode HTML untuk tombol akan tampak seperti ini.
```
<!DOCTYPE html><html><body><button style="background-color:red; border-color:blue; color:white">Teks Tombol</button></body></html>
```
Iklan

Metode 2

Metode 2 dari 2:

Menggunakan CSS

Unduh PDF

Kepala dokumen HTML akan dibuat. Bagian kepala memuat semua informasi yang tidak ditampilkan di halaman web. Informasi ini mencakup metadata, judul halaman, dan lembar gaya (style sheets).
2
Tikkan <style>. Penanda ini berfungsi menambahkan lokasi untuk CSS (Cascading Style Sheets) pada halaman web. Segmen tersebut berada pada bagian kepala dokumen HTML.
- Beberapa dokumen HTML menggunakan lembar gaya eksternal. Jika Anda menggunakan lembar eksternal, Anda perlu mencari lokasi/alamat berkas CSS eksternal dan menyunting lembar gaya untuk tombol pada berkas tersebut.
3
Tikkan .button { pada baris baru setelah segmen gaya. Lembar gaya untuk tombol yang gayanya akan Anda ubah atau sesuaikan akan dibuat. ^{[2]XTeliti sumber}
- Anda juga bisa mengatur agar warna tombol berubah saat kursor ditempatkan di atas tombol dengan membuat lembar gaya terpisah menggunakan .button:hover { sebagai penanda pembuka.
. Masukkan elemen ini pada baris baru di lembar gaya tombol. Elemen ini menentukan warna latar tombol.
5
Tikkan nama atau kode heksadesimal warna, diikuti dengan titik koma (;). Tikkan nama atau kode setelah elemen "background-color:" pada lembar gaya tombol. Nama atau kode heksadesimal yang dimasukkan menentukan warna latar tombol.
- Untuk menemukan kode heksadesimal, kunjungi https://www.google.com/search?q=color+picker melalui peramban web. Gunakan bilah slider di bawah untuk memilih warna. Setelah itu, gunakan lingkaran pada jendela untuk menentukan corak warna. Tandai dan salin kode 6 digit (termasuk simbol tagar) pada bilah samping kiri.
- Anda juga bisa mengetikkan "transparent" sebagai warna latar agar warna latar tombol tidak terlihat.
. Elemen ini menentukan warna bingkai di sekeliling tombol. Tikkan elemen pada baris terpisah di lembar gaya tombol.
7
Tikkan nama atau kode heksadesimal warna, diikuti titik koma (;). Nama atau kode ini menentukan warna bingkai di sekitar tombol. Masukkan nama atau kode setelah elemen "border-color:" pada lembar gaya tombol.
- Jika Anda ingin menghapus bingkai, tikkan border:none; sebagai pengganti elemen "border-color:colorname".
. Masukkan elemen pada baris barus di lembar gaya. Elemen ini menentukan warna teks tombol.
Nama atau kode menentukan warna teks di dalam tombol. Masukkan nama atau kode setelah elemen "color:" pada lembar gaya tombol.
Lembar gaya tombol akan ditutup. Anda bisa membuat beberapa lembar gaya untuk tombol, selama Anda memberikan nama yang berbeda untuk setiap tombol.
Setelah selesai membuat semua lembar gaya, tikkan "</style>" pada baris baru untuk menutup segmen gaya pada dokumen HTML.
Bagian kepala dokumen HTML akan ditutup.
13
Tikkan <a href="url" class="button">teks tombol</a> pada bagian tubuh dokumen HTML. Tombol akan ditambahkan ke bagian HTML yang muncul di halaman web, menggunakan lembar gaya yang Anda sudah tentukan pada segmen “Style” di dokumen HTML. Ganti "url" dengan alamat web yang Anda ingin tautkan dengan tombol. Bagian tubuh dokumen HTML berada di antara penanda <body> dan </body> pada dokumen. Secara keseluruhan, kode HTML Anda akan tampak seperti ini:
```
<!DOCTYPE html><html>   <head>    <style>     .button {      background-color:blue;      border-color:red;      color:white;      }    </style>  </head>   <body>      <a href="https://www.wikihow.com" class="button">Home</a>   </body></html>
```
Iklan