Unduh PDF
Unduh PDF
Artikel wikiHow 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.
Langkah
-
Tikkan <button pada bagian tubuh dokumen HTML. 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.
-
Tikkan style= setelah kata " button " pada penanda tombol. Teks tersebut menandakan bahwa terdapat elemen-elemen gaya pada penanda tombol. Semua elemen gaya harus ditambahkan setelah tanda "=".
-
Tambahkan tanda kutip (") setelah simbol sama dengan (=). Semua elemen gaya pada penanda tombol HTML harus diapit oleh tanda kutip.
-
Tikkan background-color: di dalam tanda kutip setelah teks " style= ". Elemen ini digunakan untuk mengubah warna latar tombol.
-
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] X Teliti sumber
-
Tikkan titik koma (;) setelah warna latar. Gunakan titik koma untuk memisahkan setiap elemen gaya pada penanda tombol HTML.
-
Tikkan border-color: di dalam tanda kutip setelah " style= ". 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 (;).
-
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: ".
-
Tikkan titik koma (;) setelah warna bingkai. Gunakan titik koma untuk memisahkan setiap elemen gaya pada penanda tombol HTML.
-
Tikkan color: dalam tanda kutip setelah " style= ". 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 (;).
-
Tikkan nama atau kode heksadesimal warna. Masukkan nama atau kode heksadesimal warna bingkai setelah elemen " color: ". Entri ini menentukan warna teks pada tombol.
-
Tikkan tanda kutip (") di akhir semua elemen gaya. 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.
-
Tikkan > setelah elemen-elemen gaya. Penanda pembuka tombol akan ditutup.
-
Tikkan teks tombol setelah penanda tombol. Setelah membuat penanda pembuka tombol, masukkan teks yang Anda ingin tampilkan pada tombol setelah penanda pembuka tersebut.
-
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
-
Tikkan <head> di bagian awal dokumen HTML. 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 ).
-
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.
-
Tikkan .button { pada baris baru setelah segmen gaya. Lembar gaya untuk tombol yang gayanya akan Anda ubah atau sesuaikan akan dibuat. [2] X Teliti 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.
-
Tikkan background-color: . Masukkan elemen ini pada baris baru di lembar gaya tombol. Elemen ini menentukan warna latar tombol.
-
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.
-
Tikkan border-color: . Elemen ini menentukan warna bingkai di sekeliling tombol. Tikkan elemen pada baris terpisah di lembar gaya tombol.
-
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 ".
-
Tikkan color: . Masukkan elemen pada baris barus di lembar gaya. Elemen ini menentukan warna teks tombol.
-
Tikkan nama atau kode heksadesimal warna, diikuti titik koma (;). Nama atau kode menentukan warna teks di dalam tombol. Masukkan nama atau kode setelah elemen " color: " pada lembar gaya tombol.
-
Tikkan } pada baris baru. Lembar gaya tombol akan ditutup. Anda bisa membuat beberapa lembar gaya untuk tombol, selama Anda memberikan nama yang berbeda untuk setiap tombol.
-
Tikkan </style> setelah Anda menyelesaikan kode CSS. Setelah selesai membuat semua lembar gaya, tikkan "</style>" pada baris baru untuk menutup segmen gaya pada dokumen HTML.
-
Tikkan </head> . Bagian kepala dokumen HTML akan ditutup.
-
pada bagian tubuh dokumen HTML." src="https://www.wikihow.com/images_en/thumb/8/8b/11147764-28.jpg/v4-460px-11147764-28.jpg" decoding="async" class="efab57dd69ac0d209a117a05464a6b9b whcdn content-fill p_maxWidth" data-srclarge="https://www.wikihow.com/images_en/thumb/8/8b/11147764-28.jpg/v4-460px-11147764-28.jpg" data-width="280" data-height="344" id="efab57dd69ac0d209a117a05464a6b9b"/>
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/11147764-28.jpg\/v4-460px-11147764-28.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/11147764-28.jpg\/v4-728px-11147764-28.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}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
Referensi
Iklan
