Exemplu de buton cu rollover 1 în CSS

Rollover 1 CSS
Pentru acest exemplu trebuie să avem 3 imagini care vor funcționa ca;
Repaus

Peste

Ținut apăsat

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


ÎNCEPUT

Și așa 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;
afisare: bloc;
culoare: # 990000;
text-decor: niciuna;
padding-top: 5px;
background-repeat: fără repetare;
greutatea fontului: 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 acesteia
fundal-poziție: centru sus;
Prin aceasta indicăm că poziția imaginii de fundal va fi centrată și în sus.
background-repeat: fără repetare;
Pentru ca fundalul să nu se repete ca și cum ar fi un model.

înălțime: 30px;
latime: 100;
Îi spunem că înălțimea va fi de 30 și lățimea 100px care sunt dimensiunile imaginilor noastre de fundal.
afisare: bloc;
Ca să genereze și să respecte o cutie cu măsurile pe care le-am pus înainte.
culoare: # 990000
Prin aceasta, dăm doar o culoare textului care se află în cutia noastră.
text-decor: niciuna;
Este pentru a evita linia care este sub link-uri.
padding-top: 5px;
Astfel încât să salvez un spațiu de 5px în partea de sus a link-ului nostru și cu aceasta coboară poziția în centrul casetei noastre.
greutatea fontului: bold;
Face literele îndrăznețe
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 la: focus {
imagine de fundal: url (bg_menu_3.jpg);
}
Dar după cum 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 rulare î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.