Knapeksempel med rollover 1 i CSS

Rollover 1 CSS
I dette eksempel skal vi have 3 billeder, der fungerer som;
Hvil

På

Holdt nede

Så i kroppen af ​​vores site har vi dette
Kode:


STARTEN

Og så for alle vores knapper, når vi bliver nødt til at bruge CSS, starter vi med denne kode:
Kode:

# bot1 {
grænse: 0 0 0 0;
polstring: 0;
tekstjustering: center;
}
Hvor vi siger, at vi ikke ønsker ydre og indre margen, justerer vi teksten til midten, nu fortsætter vi med denne kode:
Kode:

# bot1 til {
baggrundsbillede: url (bg_menu_1.jpg);
baggrundsposition: center top;
højde: 30 px;
bredde: 100px;
display: blok;
farve: # 990000;
tekst-dekoration: ingen;
polstring-top: 5px;
baggrund-gentagelse: ingen gentagelse;
font-vægt: fed;
}
At han praktisk talt er den, der gør alt, lad os se linje for linje
baggrundsbillede: url (bg_menu_1.jpg);
Med dette siger vi, at vi ønsker et baggrundsbillede, og vi giver vejen for dette
baggrundsposition: center top;
Med dette indikerer vi, at baggrundsbilledets position vil være centreret og opad.
baggrund-gentagelse: ingen gentagelse;

Så baggrunden ikke gentages som om det var et mønster.
højde: 30 px;
bredde: 100;
Vi fortæller dig, at højden vil være 30 og bredden 100 px, som er dimensionerne på vores baggrundsbilleder.
display: blok;
Så det genererer og respekterer en kasse med de mål, vi har sat før.
farve: # 990000
Med dette giver vi kun en farve til teksten, der er inde i vores kasse.
tekst-dekoration: ingen;
Det er for at undgå den linje, der er under linkene.
polstring-top: 5px;
Så jeg sparer et sted på 5 pixel i den øverste del af vores link og sænker dermed positionen til midten af ​​vores kasse.
font-vægt: fed;
Gør bogstaverne fed
Så er du bare nødt til at tilføje klasser til pseudo-elementerne "svæve" og "fokus"
Kode:

# bot1 a: svæver {
baggrundsbillede: url (bg_menu_2.jpg);
}
# bot1 til: fokus {
baggrundsbillede: url (bg_menu_3.jpg);
}
Men som vi indser, ændrede vi kun stien til vores baggrundsbilleder for at opnå den effekt, vi ledte efter.
Koden for vores rollover-eksempel i css vist nedenfor:
Kode:








STARTEN


Og billederne kan downloades fra denne side ved at højreklikke på billedet og gemme som.