Primer gumba s prevračanjem 1 v CSS

Prenos 1 CSS
V tem primeru moramo imeti 3 slike, ki bodo delovale kot;
Počivaj

Vklopljeno

Zadržano

Potem imamo v telesu našega spletnega mesta 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: sredina;
}
Če rečemo, da ne želimo zunanjega in notranjega roba, poravnamo besedilo na sredino, zdaj nadaljujemo s to kodo:
Koda:

# bot1 do {
slika v ozadju: url (bg_menu_1.jpg);
položaj ozadja: sredina zgoraj;
višina: 30px;
širina: 100px;
zaslon: blok;
barva: # 990000;
dekoracija besedila: nobena;
oblazinjenje: 5 slikovnih pik;
background-repeat: no-repeat;
teža pisave: krepko;
}
Da je pravzaprav tisti, ki naredi vse, poglejmo vrstico za vrstico
slika v ozadju: url (bg_menu_1.jpg);
S tem pravimo, da želimo sliko v ozadju in podajamo pot do tega
položaj ozadja: sredina zgoraj;
S tem označujemo, da bo položaj slike v ozadju centriran in navzgor.
background-repeat: no-repeat;
Tako da se ozadje ne ponovi, kot da bi šlo za vzorec.

višina: 30px;
širina: 100;
Povemo vam, da bo višina 30 in širina 100 slikovnih pik, kar so dimenzije naših slik v ozadju.
zaslon: blok;
Tako da ustvari in spoštuje polje z ukrepi, ki smo jih postavili prej.
barva: # 990000
S tem damo barvo le besedilu, ki je v naši škatli.
dekoracija besedila: nobena;
Da bi se izognili vrstici, ki je pod povezavami.
oblazinjenje: 5 slikovnih pik;
Tako da prihranim prostor 5px v zgornjem delu naše povezave in s tem spusti položaj na sredino naše škatle.
teža pisave: krepko;
Črke naredi krepko
Nato morate dodati razrede za psevdoelemente "hover" in "focus"
Koda:

# bot1 a: hover {
slika v ozadju: url (bg_menu_2.jpg);
}
# bot1 do: focus {
slika ozadja: url (bg_menu_3.jpg);
}
Toda kot se zavedamo, smo samo spremenili pot naših slik v ozadju, da smo dosegli iskani učinek.
Koda našega Primer prevrnitve v css prikazano spodaj:
Koda:








ZAČETEK


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