Buna ziua, dragi vizitatori! În articolul de astăzi, vom vorbi despre butoanele CSS. Aflați cum să creați o mare de soiuri de butoane CSS frumoase pentru blogurile și site-urile dvs.
Cum se face un buton CSS? Datorită stilurilor CSS, puteți face diferite butoane cu ce fel de efecte doriți și nici măcar nu trebuie să puneți nicio imagine sau JavaSkripti.
Abilitatea de a crea butoane CSS este necesară nu numai pentru începătorii care au creat recent un blog sau un site web, aceste cunoștințe vor fi utile pentru persoanele care doresc să-și îmbunătățească proiectele.
- Buton elegant
- Scrierea la valoarea unui fișier
- Crearea unui frumos buton CSS
- Rezultă pe față
BUTON HTML BROWSER NORMAL, FĂRĂ A ADAUGĂ STILURI CSS CĂUTĂ AICI AICI
Rețineți că apariția butonului va depinde nu numai de browserul pe care îl utilizați, ci și de tema desktop. Vă voi arăta un exemplu: în cele mai populare browsere (Mozila Firefox, IE și Opera) butoanele în stilul obișnuit al Windows XP arată astfel:
Aceleași butoane sunt aceleași, dar în stil clasic OC convertit, acestea vor arăta astfel:
Desigur, puteți schimba butonul dacă aplicați un stil diferit, aici este un exemplu de butoane:
Deschideți stilul dosarului cu tema stil.css și apoi scrieți următoarele
Butonul creat va arăta astfel
Puteți schimba parametrul codului butonului și îl puteți face așa cum va fi frumos să îl vedeți pentru dvs.! De exemplu, dați butonului CSS un volum, adică modificați parametrul cadru:
Schimbați la astfel de parametri:
Acum butonul nostru va arata astfel:
Acum vom da butonul CSS o decorare folosind CSS 3, este înțeles de toate browserele moderne.
În cazul în care utilizatorul este browser-ul vechi, pur și simplu nu se va vedea unele dintre efectele butoanelor noastre, vreau doar să te avertizez că nu este nimic să se teamă, și nici nu este nu afectează funcționarea unui buton, deoarece stilurile CSS sunt folosite doar pentru decor.
Să creăm ceea ce nu ar fi clasa pentru a face codul universal, de exemplu, să facă clasa .blue și să scrie același lucru pentru clasă
codul CSS va arăta astfel
De ce avem nevoie de cursuri? Dacă ați continuat să mă urmați, înseamnă că pe blogul dvs. există acum două tipuri de butoane pe care le-am făcut folosind etichete și eticheta
Răspunzând la întrebarea: de ce sunt necesare clase - puneți clasa în locul potrivit și apoi butonul va lua forma și culoarea așa cum ați vrut.
Acum voi face două butoane, într-una nu voi specifica o clasă, dar în alta voi indica.
/ * Butonul indicând clasa * /
Faceți colțuri rotunjite în butoane, scriind următoarele:
Codul nostru va arăta astfel:
Acum, dați butonul de volum prin adăugarea unei benzi albe în partea de sus și făcând o umbră interioară:
După cum puteți vedea, puteți experimenta fără sfârșit, opțiuni de mare. De asemenea, puteți face umbra translucidă în jurul butonului. Să schimbăm codul:
Ultimul exemplu
Să facem un efect rece, când plasați mouse-ul pe buton se va schimba și când faceți clic pe acesta, adică vom face clic pe butonul CSS. Facem acest lucru cu ajutorul clasei: hover and class: active. Să adăugăm o pseudo-clasă: plasați cursorul pe etichetă
Datorită pseudo-clasa: face activ un efect clic, vom adăuga la codul pe care le folosim pe mouse-ul peste, se introduce o umbră spre stânga, în partea interioară a butonului și partea de sus, de asemenea, muta textul un pic la partea de jos și spre dreapta:
Ultima opțiune pentru butonul dvs. în stil CSS este de a arăta astfel (este afișată cea mai recentă versiune):
Puteți vedea această acțiune în site-ul potrivit al blogului "Meniu curs".
Mai ales pentru tine
Distribuiți informații utile
Articole similare
Trimiteți-le prietenilor: