Knappexempel med rollover 1 i CSS

Rollover 1 CSS
För detta exempel måste vi ha 3 bilder som kommer att fungera som;
Vila

På

Hålls nere

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


BÖRJAN

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

# bot1 {
gräns: 0 0 0 0;
stoppning: 0;
text-align: center;
}
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: block;
färg: # 990000;
text-dekoration: ingen;
padding-top: 5px;
bakgrundsupprepning: ingen upprepning;
font-weight: fet;
}
Att det praktiskt taget är han 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 positionen för bakgrundsbilden 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 till honom att höjden blir 30 och bredden 100px, vilket är måtten på våra bakgrundsbilder.
display: block;
Så att den genererar och respekterar en låda med de åtgärder som vi sätter före.
färg: #990000
Med detta ger vi bara en färg till texten som finns i vår box.
text-dekoration: ingen;
Det är för att undvika linjen som är under länkarna.
padding-top: 5px;
Så att jag sparar ett utrymme på 5px i den övre delen av vår länk och med detta sänker den positionen till mitten av vår box.
font-weight: fet;
Gör bokstäverna feta
Sedan behöver du bara lägga till klasser för pseudoelementen "hover" och "fokus"
Koda:

# bot1 a: hover {
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 denna sida, genom att högerklicka på bilden och spara som.