Primer gumba s preklopom 1 v CSS

Rollover 1 CSS
Za ta primer moramo imeti 3 slike, ki bodo delovale kot;
Počivaj

Na

Držal navzdol

Potem imamo v telesu naše strani to
Koda:


ZAČETEK

In tako za vse naše gumbe, potem ko bomo morali uporabiti CSS, začnemo s to kodo:
Koda:

# bot1 {
meja: 0 0 0 0;
oblazinjenje: 0;
poravnava besedila: središče;
}
Kjer rečemo, da ne želimo zunanjega in notranjega roba, besedilo poravnamo na sredino, zdaj nadaljujemo s to kodo:
Koda:

# bot1 do {
slika ozadja: url (bg_menu_1.jpg);
položaj ozadja: sredinski vrh;
višina: 30px;
širina: 100px;
zaslon: blok;
barva: # 990000;
besedilna dekoracija: brez;
padding-top: 5px;
ponovitev ozadja: brez ponovitve;
teža pisave: krepko;
}
Da je tako rekoč on tisti, ki dela vse, pa poglejmo vrstico za vrstico
slika ozadja: url (bg_menu_1.jpg);
S tem rečemo, da želimo sliko ozadja in podamo pot tega
položaj ozadja: sredinski vrh;
S tem nakazujemo, da bo položaj slike ozadja na sredini in navzgor.
ponovitev ozadja: brez ponovitve;
Da se ozadje ne ponavlja, kot da bi bil vzorec.
višina: 30px;
širina: 100;

Povemo mu, da bo višina 30 in širina 100 slikovnih pik, kar sta dimenzije naših slik ozadja.
zaslon: blok;
Tako da ustvari in spoštuje škatlo z ukrepi, ki smo jih postavili prej.
barva: #990000
S tem samo damo barvo besedilu, ki je znotraj našega polja.
besedilna dekoracija: brez;
Izogniti se je treba vrstici, ki je pod povezavami.
padding-top: 5px;
Tako da prihranim prostor 5px v zgornjem delu naše povezave in s tem znižam položaj na sredino našega polja.
teža pisave: krepko;
Črke naredi krepke
Nato morate dodati razrede za psevdo elementa "hover" in "focus"
Koda:

# bot1 a: lebdi {
slika ozadja: url (bg_menu_2.jpg);
}
# bot1 za: fokus {
slika ozadja: url (bg_menu_3.jpg);
}
Toda kot se zavedamo, smo le spremenili pot naših slik v ozadju, da bi dosegli učinek, ki smo ga iskali.
Koda našega primer rollover v css prikazano spodaj:
Koda:








ZAČETEK


Slike lahko prenesete s te strani, tako da z desno miškino tipko kliknete sliko in shranite kot.