Exemplu de buton cu Rollover 1 în CSS

Reduceți 1 CSS
Pentru acest exemplu trebuie să avem 3 imagini care să funcționeze ca;
Repaus

Pe

Ținut jos

Apoi, în corpul site-ului nostru, avem acest lucru
Cod:


ÎNCEPUT

Și astfel, pentru toate butoanele noastre, după ce va trebui să folosim CSS, începem cu acest cod:
Cod:

# bot1 {
chenar: 0 0 0 0;
umplutură: 0;
text-align: centru;
}
Acolo unde spunem că nu vrem marginea exterioară și interioară, aliniem textul la centru, acum continuăm cu acest cod:
Cod:

# bot1 la {
imagine de fundal: url (bg_menu_1.jpg);
fundal-poziție: centru sus;
înălțime: 30px;
lățime: 100px;
display: bloc;
culoare: # 990000;
decor-text: nici unul;
căptușeală: 5 px;
background-repeat: no-repeat;
font-weight: bold;
}
Că el este practic cel care face totul, să vedem rând cu rând
imagine de fundal: url (bg_menu_1.jpg);
Cu aceasta spunem că vrem o imagine de fundal și dăm calea acestei
fundal-poziție: centru sus;
Cu aceasta indicăm că poziția imaginii de fundal va fi centrată și în sus.
background-repeat: no-repeat;
Astfel încât fundalul să nu se repete ca și cum ar fi un model.

înălțime: 30px;
lățime: 100;
Vă spunem că înălțimea va fi de 30 și lățimea de 100 px, care sunt dimensiunile imaginilor noastre de fundal.
display: bloc;
Pentru a genera și respecta o cutie cu măsurile pe care le-am pus mai înainte.
culoare: # 990000
Cu aceasta dăm o culoare doar textului care se află în caseta noastră.
decor-text: nici unul;
Este pentru a evita linia care se află sub linkuri.
căptușeală: 5 px;
Astfel încât să economisesc un spațiu de 5 px în partea superioară a legăturii noastre și cu aceasta scade poziția spre centrul cutiei noastre.
font-weight: bold;
Face literele aldine
Apoi trebuie doar să adăugați clase pentru pseudoelementele „hover” și „focus”
Cod:

# bot1 a: hover {
imagine de fundal: url (bg_menu_2.jpg);
}
# bot1 to: focus {
imagine de fundal: url (bg_menu_3.jpg);
}
Dar, pe măsură ce ne dăm seama, am schimbat doar calea imaginilor noastre de fundal pentru a obține efectul pe care îl căutam.
Codul nostru exemplu de trecere în css prezentat mai jos:
Cod:








ÎNCEPUT


Iar imaginile pot fi descărcate de pe această pagină, făcând clic dreapta pe imagine și salvând ca.