Contoh Tombol Dengan Rollover 1 Di CSS

Rollover 1 CSS
Untuk contoh ini kita harus memiliki 3 gambar yang akan berfungsi sebagai;
Istirahat

Pada

Diturunkan

Kemudian di badan situs kami, kami memiliki ini
Kode:


AWAL

Dan untuk semua tombol kita, setelah kita harus menggunakan CSS, kita mulai dengan kode ini:
Kode:

# bot1 {
batas: 0 0 0 0;
bantalan: 0;
perataan teks: tengah;
}
Di mana kami mengatakan bahwa kami tidak ingin margin luar dan dalam, kami menyelaraskan teks ke tengah, sekarang kami melanjutkan dengan kode ini:
Kode:

# bot1 ke {
background-image: url (bg_menu_1.jpg);
background-position: tengah atas;
tinggi: 30 piksel;
lebar: 100 piksel;
tampilan: blok;
warna: #990000;
dekorasi teks: tidak ada;
padding-atas: 5px;
background-repeat: jangan ulangi;
font-berat: tebal;
}
Bahwa dia praktis yang melakukan segalanya, mari kita lihat baris demi baris
background-image: url (bg_menu_1.jpg);
Dengan ini kami mengatakan bahwa kami menginginkan gambar latar belakang dan kami memberikan jalur ini
background-position: tengah atas;
Dengan ini kami menunjukkan bahwa posisi gambar latar belakang akan berada di tengah dan ke atas.

background-repeat: jangan ulangi;
Sehingga latar belakang tidak berulang seolah-olah itu sebuah pola.
tinggi: 30 piksel;
lebar: 100;
Kami memberi tahu dia bahwa tingginya akan menjadi 30 dan lebar 100px yang merupakan dimensi dari gambar latar belakang kami.
tampilan: blok;
Sehingga menghasilkan dan menghormati kotak dengan langkah-langkah yang kami lakukan sebelumnya.
warna: #990000
Dengan ini kita hanya memberi warna pada teks yang ada di dalam kotak kita.
dekorasi teks: tidak ada;
Hal ini untuk menghindari garis yang berada di bawah link.
padding-atas: 5px;
Jadi saya menghemat ruang 5px di bagian atas tautan kami dan dengan ini menurunkan posisi ke tengah kotak kami.
font-berat: tebal;
Membuat huruf tebal
Maka Anda hanya perlu menambahkan kelas untuk elemen semu "arahkan" dan "fokus"
Kode:

# bot1 a: arahkan kursor {
background-image: url (bg_menu_2.jpg);
}
# bot1 ke: fokus {
background-image: url (bg_menu_3.jpg);
}
Namun seperti yang kami sadari, kami hanya mengubah jalur gambar latar belakang kami untuk mencapai efek yang kami cari.
Kode kami contoh rollover di css ditunjukkan di bawah ini:
Kode:








AWAL


Dan gambar dapat diunduh dari halaman ini, dengan mengklik kanan pada gambar dan menyimpan sebagai.