Crearea butoanelor cu pictograme, dar fără imagini utilizând css

Pentru un dezvoltator web, cel mai bine este să reduceți la minim utilizarea imaginilor, de exemplu folosind pictogramele pentru butoanele care sunt create numai cu CSS. Există o mulțime de icoane similare, acestea sunt adăugate la codul CSS sub formă de valori hexazecimale. Aceste coduri pentru icoane pot fi găsite în locuri diferite, aici sunt câteva locuri care au fost folosite pentru a crea această lecție:

În aceste liste am reușit să găsim diferite coduri care pot fi utile pe site.

Acum, că ați selectat simbolurile corespunzătoare, vă vom arăta cum să le plaseze într-o clipă, folosind doar cod CSS și pseudo: înainte de a adăuga conținut la elementul de clasă.

Crearea unui buton

Mai întâi trebuie să creați un buton. În acest exemplu, un dreptunghi obișnuit cu colțuri rotunjite, creat utilizând CSS3, este utilizat ca buton.

Copiați codul CSS pentru butonul de mai jos:

Adăugarea unei clase pseudo: înainte

După ce am creat butonul, trebuie să adăugăm o pseudo-clasă: înainte, pentru a putea adăuga conținut la buton.

Tot ce avem nevoie acum este să adăugăm linii externe și interne pentru aranjarea clasei pseudo: înainte de a fi corect.

Copiați CSS-ul de mai jos pentru pseudo-clasa: înainte:

Acum, pentru a pune pictograma pe buton, trebuie să adăugăm proprietatea conținutului la CSS.

Prin setarea proprietății de conținut a clasei pseudo: înainte, putem crea noi clase CSS pentru diferitele caractere pe care le dorim să le folosim.

Mai jos sunt diferitele icoane care ne-au părut interesante pentru butoanele pure CSS.

Butoane cu forme

Buton, Adăugare, Editare, Ștergere, Salvare, Scriere, Cruce.

Iată butoanele pe care le puteți utiliza pentru formulare:

Butoane cu valute

Dacă doriți să afișați pe butoane simbolurile valutare:

Butoane cu temperatură

Pentru a afișa simbolurile pentru temperaturile Celsius și Fahrenheit:

Butoane cu simboluri matematice

Pi, o treime, două treimi, o cincime, două cincimi, trei cincimi, patru cincimi, un al șaselea, cinci al șaselea, al optulea, trei optimi, cinci eighths, șapte optimi de un sfert, jumătate, trei sferturi.

Există multe simboluri matematice, acestea sunt cele care ne-au părut utile:

Butoane cu săgeți

Săgeată spre stânga, Săgeată sus, Săgeată dreapta, Săgeată în jos, Săgeată sus în sus, Săgeată dreapta sus, Săgeată în jos, Săgeată dreapta jos, Următorul.

Puteți utiliza diferite tipuri de săgeți:

Butoane cu simboluri diferite

Crearea butoanelor cu pictograme, dar fără imagini utilizând css

Există o mulțime de insigne, am găsit următoarele interesante:

Uită-te la pagina cu o demonstrație a lucrării. modul în care arată pictogramele în browser.

Articole similare

Pagina anterioară

Pagina următoare