Nah kali ini gak ada salahnya mempelajari tombol melalui HTML (zadul? Biarin!).
Secara default, tombol standart berbentuk seperti
Untuk membuat tombol seperti diatas, kode standartnya adalah dengan <button> dan ditutup dengan </button>
Nah di posting kali ini kita akan mencoba mengkustomisasi tampilan tombol
Merubah warna tombol
Kita bisa merubah warna tampilan tombol seperti tombol ini sesuai keinginan kita caranya adalah dengan menambah style="background:kode warna" pada tag <button> contoh kode keseluruhan kurang lebih
<button style="background:#FF0000">kata dalam tombol</button>#FF0000
adalah kode warna dari merah, silahkan ganti sesuai keinginan!
Merubah warna huruf di dalam tombol
Huruf di dalam tombol, juga bisa kita kustomisasi seperti tombol ini
Kodenya sama dengan yang sebelumnya yaitu dengan menambah style= ke tag <button> kodenya kurang lebih:
<button style="font:18px">kata dalam tombol</button>
Bagaimana jika ingin menggabungkan 2 style atau lebih?
Semisal kita ingin membuat tombol merah dengan font warna putih seperti tombol ini.
Kita tahu kalau kustomisasi warna berkode background:#000000 dan kode warna font berkode color:#FFFFFF untuk menggabungkannya, kita tambahkan ; sebagai pemisah (seperti background:#000000; color:#FFFFFF) jadi kode tombolnya kurang lebih:
<button style="background:#000000; color:#FFFFFF">kata dalam tombol</button>
Melihat cara yang diatas, kayaknya kurang praktis deh!
Untuk membuatnya lebih praktis, kita bisa gunakan CSS
Kode CSS kurang lebih:
#tombol{
background:#FFFFFF;
font-size:14px;
font-color:#0000000;
font-type:Comic San MS;
}
(silahkan edit dan ralat sendiri kalau ada yang salah)
Dan untuk tombolnya kita tinggal panggil CSS #tombol ke dalam tombol kita, dengan menambah id="" pada tag <button> kurang lebih kodenya:
<button id="tombol">kata dalam tombol</button> cara ini dinilai lebih mudah dan singkat jika ingin membuat tombol dengan bentuk yang sama dalam jumlah banyak
Selamat Mencoba
No comments:
Post a Comment