Primjer gumba s prevrtanjem 1 u CSS-u

Prebacivanje 1 CSS
U ovom primjeru moramo imati 3 slike koje će raditi kao;
Odmori se

Na

Zadržano

Tada u tijelu naše stranice imamo ovo
Kodirati:


POČETAK

I tako za sve naše gumbe, nakon što ćemo morati koristiti CSS, započinjemo s ovim kodom:
Kodirati:

# bot1 {
obrub: 0 ​​0 0 0;
popunjavanje: 0;
poravnanje teksta: središte;
}
Tamo gdje kažemo da ne želimo vanjsku i unutarnju marginu, poravnavamo tekst prema sredini, a sada nastavljamo s ovim kodom:
Kodirati:

# bot1 do {
pozadinska slika: url (bg_menu_1.jpg);
položaj pozadine: središnji vrh;
visina: 30px;
širina: 100px;
prikaz: blok;
boja: # 990000;
ukras teksta: nijedan;
podložak: 5 piksela;
pozadina-ponavljanje: bez ponavljanja;
font-weight: podebljano;
}
Da je on praktički taj koji sve radi, da vidimo red po redak
pozadinska slika: url (bg_menu_1.jpg);
Ovim kažemo da želimo pozadinsku sliku i dajemo put ovome
položaj pozadine: središnji vrh;
Ovim označavamo da će položaj pozadinske slike biti centriran i prema gore.
pozadina-ponavljanje: bez ponavljanja;

Tako da se pozadina ne ponavlja kao da je uzorak.
visina: 30px;
širina: 100;
Kažemo mu da će visina biti 30, a širina 100 piksela, što su dimenzije naših pozadinskih slika.
prikaz: blok;
Tako da generira i poštuje okvir s mjerama koje smo prije stavili.
boja: # 990000
Ovim samo dajemo boju tekstu koji se nalazi u našoj kutiji.
ukras teksta: nijedan;
Izbjegava se crta koja se nalazi ispod poveznica.
podložak: 5 piksela;
Da biste uštedjeli prostor od 5 piksela u gornjem dijelu naše veze, a time i spustite položaj u središte naše kutije.
font-weight: podebljano;
Čini slova podebljanim
Tada jednostavno morate dodati klase za pseudo elemente "hover" i "focus"
Kodirati:

# bot1 a: hover {
pozadinska slika: url (bg_menu_2.jpg);
}
# bot1 za: focus {
pozadinska slika: url (bg_menu_3.jpg);
}
Ali kao što shvaćamo, samo smo promijenili put pozadinskih slika da bismo postigli željeni efekt.
Kod našeg primjer prevrtanja u css-u prikazano ispod:
Kodirati:








POČETAK


I slike se mogu preuzeti s ove stranice, desnim klikom na sliku i spremanjem kao.