MENGUBAH TAMPILAN WARNA PADA BUTTON

1.

2.

Coba bandingkan antara tombol 1 dan tombol 2 diatas. Sangat jauh berbeda kan? apalagi dilihat dari artistiknya jelas sekali kalau tombol nomor 2 lebih dibandingkan dengan nomor 1.

Nah untuk pembahasan kali ini adalah bagaimana merubah warna dari tombol ( BUTTON).

  1. Pertama saya akan memberitahu terlebih dahulu code HTML dari tombol nomor 1 diatas adalah <button >TOMBOL</button>.
    Untuk melihat hasil dari code HTML ini coba saja buka program editor NOTEPAD pada komputer kamu.Caranya biar lebih paham lagi Klik Start > All Program >Accessories > Notepad. Bisa kan ?...
    Seteleh NOTEPAD kamu siap, coba ketikkan code tersebut yaitu
    <button>TOMBOL</button>,
    lalu simpan dengan nama tombol.html. Kemudian buka lagi tombol.html tersebut, maka yang kamu dapatkan adalah seperti pada contoh nomor 1 diatas.
    Nah..sekarang tugas kita adalah bagaimana merubah warna dari tombol tersebut sesuai selera kita. Untuk itu ikuti langkah nomor 2 dibawah ini...
  2. Untuk mengganti warna tombol yang masih default seperti pada nomor 1 diatas tidaklah susah. Sekarang tinggal kamu tambahkan beberapa baris code tambahan yaitu seperti ini
    <button style="color: #000000; border: 3px double #000000; background-color: #8AB36F" >TOMBOL</button>.
    Sebenarnya ini hanyalah permainan CSS saja.
    Untuk penjelasannya silahkan simak disini :

    color: #000000 ==> Tulisan TOMBOL
    border: 3px double #000000 ===> bingkai tombol dengan garis double, besar 3 pixel serta warna bingkai hitam.
    background-color: #8AB36F ===> background tombol hijau.

Cara ini juga bisa di terapkan pada text area.
Contoh :

OK... Silahkan mencoba ............... !!!!

1 comment:

Dhany Family said...

bisa nambah ilmu baru neh...
thanks dah mau berkunjung

Post a Comment

Copyright © TheTop World News - Blogger Theme by BloggerThemes | Blogger Templates | newwpthemes - Sponsored by LA ODE