Buton în css

Butonul standard în browser-ul dvs., după cum urmează:

codul HTML buton

Și apariția butonului nu va depinde numai de browser-ul utilizatorului, dar, de asemenea, pe „teme“ ale desktop-ului. De exemplu, din moment ce butonul arată în cele mai populare browsere (IE, Mozilla și Opera, respectiv), în stilul standard pentru Windows XP

Și ea va trebui să se uite, în cazul în care utilizatorul preferă să utilizeze „stilul clasic“ pentru desktop-ul tau

Și, desigur, butonul poate fi modificat în aplicarea unui alt stil personalizat, cum ar fi

Deci, butoanele de pe site-ul dvs. să arate la fel pentru toți utilizatorii, fără a compromite designul planificat, cel mai simplu mod de a specifica aspectul lor folosind CSS.

Să prescrie în parametrii CSS astfel tag-ul

Acum butonul, toți utilizatorii vor fi după cum urmează

Setările de cod pot fi modificate în limite largi, de exemplu, pentru a face butonul de volum, să modificați parametrii butoanelor cadru, înlocuiți

cod CSS frontieră: 1px solid # 73C8F0;

La astfel de parametri

cod CSS frontieră: 2px # 73C8F0 bun inceput;

Și butonul va arăta astfel

Acum, să zaymomsya mai serioase „decorare“ a butonului. Oportunități prevede utilizarea CSS3. care este înțeleasă de către toate browserele moderne. În același cei care isplzuetsya browsere nu au fost încă adaptat la CSS3, pur și simplu nu va arăta unele dintre efectele pe care așa cum nu afectează activitatea unui buton, din moment ce toate „decoratiunile“ sunt, în plus față de butoanele externe destinate.

De exemplu, diversitatea și pentru a face codul mai unevirsalnym noastre, să creeze o anumită clasă, de exemplu, .blue și prescrie pentru el toate la fel, pe care am scris-o pentru

în primul exemplu de realizare.

Acum, codul nostru CSS va arata asa

Care sunt clasele? De exemplu, pe site-ul dvs., există două tipuri de butoane create cu diferite tag-uri

și și doriți ca într-un caz, butonul are un formular standard (browser-ul implicit definit), iar într-un alt caz, afișată intenționat de către dumneavoastră, sau doriți să creați butoane de diferite culori, sau altceva. Aici, apoi, în locația corectă pe care tocmai ștampilate „clasă“ și, în acest caz, butonul se va arăta așa cum ai planificat.

De exemplu, să creeze două butoane, și într-un caz, specificați clasa, dar nu și în altele. Pentru claritate, am un buton pentru a face la locul de muncă

Codul HTML / * buton, fără a specifica clasa * /

/ * Buton cu indicarea clasei * /

colțuri rotunjite pe buton, puteți adăuga într-un stylesheet următorul cod:

cod CSS border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

Puteți adăuga, de asemenea, un gradient:

fundal cod CSS: -moz-liniar gradient (0% 100% 90deg, # 2E8CE3, # 73C2FD); fundal: -webkit gradient (liniar, 0% 0% 0% 100%, de la (# 73C2FD), la (# 2E8CE3));

Acest lucru este complet codul va arata astfel:

Pentru a face butonul de volum, puteți adăuga o umbră interior, prin adăugarea de dungi albe la partea superioară a acesteia:

cod CSS box-shadow: inset 1px 0 0 0 #FFFFFF; -moz-box-shadow: platcă 0 0 0 # FFFFFF 1 px; -webkit-box-shadow: platcă 0 0 1pixel 0 # FFFFFF;

Un contrast cu marginea inferioară a cadrului face mai întunecat:

cod CSS border-bottom-color: # 196ebb;

Trebuie doar să adăugați o umbră pentru textul care va face butonul de mai expresiv:

cod CSS text-shadow: 0 -1px 0 # 196ebb;

După cum puteți vedea o mulțime de opțiuni, puteți experimenta cu orice parametri. De exemplu, să creeze o umbră translucide în jurul butonului. Pentru a face acest lucru, vom înlocui

cod CSS -moz-box-shadow: inset 0 0 0 1pixel # FFFFFF; -webkit-box-shadow: platcă 0 0 1pixel 0 # FFFFFF; border-bottom-color: # 196EBB; text-shadow: 0 -1px 0 # 196EBB;

La astfel de parametri

cod CSS -moz-box-shadow: 0 1px 3px RGBA (0,0,0,0.5); -webkit-box-umbra: 0 1px 3px RGBA (0,0,0,0.5); border-bottom: RGBA solid 1px (0,0,0,0.25); text-shadow: 0 -1px 1px RGBA (0,0,0,0.25);

Și astfel, pentru comparație, să ia ultima opțiune, butonul va arata ca in browser-ul dvs.

Pentru un efect chiar mai bine, se adaugă o opțiune bună pentru a schimba aspectul butonului atunci când treceți cursorul pe el, precum și prin apăsarea butonului. Acest lucru se face cu ajutorul clasei pseudo: hover și: activ

Adăugați pseudo clasa: buton hover primului exemplu de realizare, adică, pentru a eticheta

schimba culoarea unui buton atunci când mutați cursorul mouse-ului pe el. Stilurile de masă vor face înregistrarea.

Folosind clasa pseudo: activ a crea un efect de clic, de exemplu, la codul utilizat atunci când mouse-ul pentru a adăuga umbră întunecată din stânga și porțiunea superioară interioară a butonului, precum și deplasa textul în dreapta și în jos:

Aceasta este, versiunea finală a CSS pentru butonul dvs. ar trebui să arate ca acest lucru (prezintă o variantă a ultimului tip de buton)