Knappsexempel med övergång 1 i CSS

Övergång 1 CSS
För detta exempel måste vi ha tre bilder som fungerar som;
Vila

På

Hålls ner

Sedan har vi det här på vår webbplats
Koda:


BÖRJAN

Och så för alla våra knappar, efter att vi måste använda CSS, börjar vi med den här koden:
Koda:

# bot1 {
gräns: 0 0 0 0;
stoppning: 0;
textjustera: centrum;
}
Där vi säger att vi inte vill ha yttre och inre marginal, justerar vi texten till mitten, nu fortsätter vi med den här koden:
Koda:

# bot1 till {
bakgrundsbild: url (bg_menu_1.jpg);
bakgrundsposition: mitt uppe;
höjd: 30px;
bredd: 100px;
display: blockera;
färg: # 990000;
text-dekoration: ingen;
stoppning-topp: 5px;
bakgrundsupprepning: ingen upprepning;
font-vikt: fet;
}
Att han praktiskt taget är den som gör allt, låt oss se rad för rad
bakgrundsbild: url (bg_menu_1.jpg);
Med detta säger vi att vi vill ha en bakgrundsbild och vi ger vägen till detta
bakgrundsposition: mitt uppe;
Med detta indikerar vi att bakgrundsbildens position kommer att vara centrerad och uppåt.
bakgrundsupprepning: ingen upprepning;

Så att bakgrunden inte upprepas som om det vore ett mönster.
höjd: 30px;
bredd: 100;
Vi säger att höjden kommer att vara 30 och bredden 100px vilket är dimensionerna på våra bakgrundsbilder.
display: blockera;
Så att den genererar och respekterar en ruta med de åtgärder som vi satte tidigare.
färg: # 990000
Med detta ger vi bara en färg till texten som finns i vår ruta.
text-dekoration: ingen;
Det är att undvika linjen som ligger under länkarna.
stoppning-topp: 5px;
Så att jag sparar ett utrymme på 5 pixlar i den övre delen av vår länk och med det sänker det positionen till mitten av vår låda.
font-vikt: fet;
Gör bokstäverna djärva
Då behöver du bara lägga till klasser för pseudo-elementen "sväva" och "fokusera"
Koda:

# bot1 a: sväva {
bakgrundsbild: url (bg_menu_2.jpg);
}
# bot1 till: fokusera {
bakgrundsbild: url (bg_menu_3.jpg);
}
Men som vi inser ändrade vi bara vägen för våra bakgrundsbilder för att uppnå den effekt vi letade efter.
Koden för vår rollover exempel i css visas nedan:
Koda:








BÖRJAN


Och bilderna kan laddas ner från den här sidan genom att högerklicka på bilden och spara som.