Am selectat câteva butoane CSS care cred că pot fi folosite în proiecte web.
Generator de butoane CSS3
Uită-te la generator Butoane CSS3 de la Sanwebe:
Buton roz CSS3 cu font Pacifico
drăguț butonul roz ( în afară de un mic cod jQuery pentru a reda muzica și a schimba textul interior) se bazează complet pe CSS3:
Colecție de butoane 3D
O colecție de butoane 3D create cu CSS3:
Butoane sociale 3D
Butoane sociale grozave realizate cu CSS3 și font pictogramă:
Butoane CSS3 animate
Butoane CSS animate cu modele de fundal. Este posibil să nu funcționeze în browserele Firefox 3.6 și IE10:
Butoane animate rotunde CSS3
Iată câteva butoane mai animate în care rotirea textului la hover oferă un efect cu adevărat atrăgător:
Curățați butoanele cercului
Iată un alt exemplu de butoane rotunde CSS3:
Butoane de comutare CSS3
Butoane radio bine făcute create cu CSS3 și font pictogramă:
Buton animat CSS3
Un buton 3D drăguț creat cu CSS3 și Fonturi Google:
Efectele butoanelor CSS3
Aceste butoane arată animații folosind diferite proprietăți CSS3:
Butoane CSS3 lucioase
Acum puteți fi absolut sigur că butoanele lucioase pot fi create cu ușurință cu CSS3, nu mai există Photoshop:
Butoane 3D CSS3
Este uimitor ce se poate face cu pseudo-elementele CSS3:before și :after. Consultați aceste butoane 3D uimitoare:
Comutator CSS3
Exemplu de buton de comutare CSS3 fără JavaScript:
Efect de buton de răsturnare 3D
Efect de buton de răsturnare 3D creat cu CSS3:
nasturi de marcă
Butoane CSS frumoase ale mărcilor populare folosind pictograme bootstrap:
Buton rotund întunecat
Buton rotund folosind jQuery pentru a da un efect de picurare atunci când se face clic pe butonul:
Comutator CSS3
Comutator creat cu CSS3 :
Frumoși nasturi plati
O colecție de butoane CSS plate pentru toate ocaziile, fără animații și efecte:
Butoane de distribuire socială
Versiune mai atractivă a butoanelor acces public dar fara functionalitate. Potrivit dezvoltatorului, ar trebui să funcționeze în IE7+:
butonul de Crăciun
Un buton CSS de Crăciun folosind metoda data:urls pentru a încorpora o imagine direct în document:
butonul soft
Buton rotund lucios creat cu CSS3:
Buton moale
Butoanele folosesc numai caractere Unicode, ceea ce permite fonturi de text sau pictograme:
Butoane mari CSS3 animate 3D
Un alt set de butoane CSS animate 3D pentru site-uri web. Animația se realizează folosind proprietățile animației și cadrelor cheie:
Butoane metalice CSS3
O colecție de butoane CSS3 metalice ale căror caractere au fost create folosind fontul picto folosind @font-face . Pentru efectul metalic s-au folosit proprietățile casete-umbră și gradient liniar:
Butoane CSS3 rotunde
O altă colecție de butoane CSS3 animate rotunde:
Butoane CSS3 pe care se poate face clic pentru rețelele sociale
Butoanele folosesc proprietăți CSS3 simple, cum ar fi gradienți, umbre cu casete, umbre text și așa mai departe. Stările în așteptare și active sunt, de asemenea, incluse în acest set:
Butoane CSS3 simple
Destul de butoane CSS:
butonul de descărcare tridimensional
Acest buton 3D folosește o transformare de perspectivă. Funcționează doar în browserele bazate pe webkit:
Butoane CSS3 izbitoare pentru rețelele sociale
buton mare
Un buton CSS3 lucios solid, cu un efect de umbră în partea de jos. Butonul folosește un font numit Sansita One din colecția Google:
Butoane simple
Câteva butoane CSS simple:
Butoane CSS3 Social Media
Butoane CSS simple
Un set de butoane CSS simple. Sunt ușor de configurat și de utilizat. Ele pot fi integrate cu ușurință cu Font-Awesome sau cu altă bibliotecă:
Butoane sub formă de jetoane de poker
Un exemplu de buton simplu cu jetoane de poker. Poate fi folosit și ca buton de hover:
butonul glisor
Concept Buton glisor CSS:
Butoanele de meniu Admin
Panoul Administratorului ( meniu sau navigare) folosind CSS3 și cadrul fontawesome. Când treceți la un buton, clasa activă este adăugată folosind jQuery:
Cusut pe nasture
Un buton simplu cu o linie care demonstrează puterea CSS3 fără a utiliza o imagine de fundal:
Buton rotativ
Un buton rotund cu un chenar rotativ pentru a indica trecerea mouse-ului:
butonul CSS3
Buton soft creat cu CSS3 pe baza acestui exemplu:
Butonul cardului pop-up CSS3
Aceste butoane CSS arată ca niște cărți care ți se strecoară din mânecă. Acestea pot fi folosite pentru a afișa informații care ar trebui ascunse până când utilizatorul face o selecție:
Candy Button CSS3 Animație
Buton animat pentru a afișa starea descărcării:
butoane radio CSS3
Butoane radio drăguțe care folosesc jQuery pentru a comuta între clasă:
Butoane lucioase
Set de butoane frumoase pentru site-ul CSS. Sunt folosite diferite proprietăți pentru a da un aspect lucios 3D:
În fiecare zi, noile standarde css3 și html5 devin din ce în ce mai profund încorporate în viața designerilor de layout și a dezvoltatorilor web, iar browserele devin din ce în ce mai compatibile cu aceste standarde în fiecare zi.
În legătură cu acest eveniment, aș dori să vă prezint o selecție de 10 butoane css3 care vă pot face viața mai ușoară atunci când faceți layout și crearea web aplicatii.
1. Butoane Super Awesome.
Acest set de butoane folosește setul css3 și colorarea RGBA.
Adăugarea acestui set de butoane la pagina dvs. nu este dificilă, trebuie să vă conectați șablon cssși adăugați clasele necesare la link-uri pentru a le schimba culoarea, forma etc.
Exemplu de conexiune:
Buton Super Awesome » Buton albastru minunat » Buton magenta minunat » Buton roșu minunat » Buton portocaliu minunat » Buton galben minunat »2. Butoanele Google.
Aceste butoane s-au bazat pe Pagina principală Google.com. De asemenea, sunt simple și minimaliste.
Exemplu de conexiune:
Mă simt norocos3. Butoane Gradient CSS3.
Butoanele sunt foarte asemănătoare cu butoanele Super Awesome menționate mai sus. Acest set este prezentat in mai multe culori (9 culori) si diverse forme.
Exemplu de conexiune:
Dreptunghi sau rotunjite pot fi medii sau miciH3
4. Butonul Kick-Ass CSS3.
Acest buton nu este cel mai interesant din punct de vedere al designului, dar la linkul de mai jos puteți urmări un tutorial video despre crearea unor astfel de butoane, care va fi util dezvoltatorilor web începători.
5. Pictograme CSS pure pentru rețelele sociale.
Acest set este un set de pictograme retele sociale decât nasturi. Setul este reprezentat de zece pictograme ale rețelelor sociale, inclusiv Facebook, Twitter, Flickr și altele.
Exemplu de conexiune:
- Stare de nervozitate
- RSS
- Flickr
- Delicios
- orkut
- Technorati
- NetVibes
6. Butoane CSS3 extrem de fanteziste.
Toți proprietarii de dispozitive iOS vor recunoaște cu siguranță aceste butoane, butoane similare au fost prezente în dispozitivele iOS încă de la primele versiuni. Aceste butoane, ca multe cele prezentate aici, au setări de culoare, dimensiune și sunt realizate în pur css3.
Exemplu de conexiune:
Post7. Bonbon: Dulci butoane CSS3.
Esti un dinte natural de dulce? Atunci aceste butoane sunt pentru tine. Sunt făcute în așa fel încât să vrei doar să le mănânci sau, eventual, să le folosești în proiectul tău. Diverse culori, forme, stări care vă vor plăcea cu siguranță.
Exemplu de conexiune:
eticheta8. Butoane CSS3 cu aspect realist
Un set interesant de nasturi, culori stricte, rotunjiri, merită, fără îndoială, atenție.
Exemplu de conexiune:
împingeți-l9. Butoane simple CSS3 Github.
Ați mai văzut deja implementarea unor astfel de butoane pe github.com, sunt foarte ușor de instalat, comode și minimaliste. De asemenea, este posibil să adăugați pictograme la butoane.
Exemplu de conexiune:
Acesta este un buton Acesta este un buton pentru pastile Împărțiți la zero10. Butoane flexibile de comutare CSS3.
Aceste butoane Css3 sunt foarte drăguțe, dar nu practice, deoarece sunt implementate doar cu Suport Firefox Din păcate, alte browsere nu sunt acceptate.
Exemplu de conexiune:
Vlad Merjevici
Butoane standard create printr-o etichetă
Orez. 1. Buton original și modificat
Imaginile pot fi folosite pentru a schimba drastic aspectul unui buton, dar, în comparație cu capacitățile CSS 3, această opțiune pare acum făcută acasă.
Voi folosi ca bază butonul original din browser, care conține un gradient vertical liniar și margini rotunjite.
Cel mai ușor de făcut este să rotunjim colțurile, pentru care folosim proprietatea border-radius, setând-o la raza de rotunjire dorită. Ca de obicei, nu funcționează în toate browserele, așa că va trebui să adăugați setul complet. Rezultatul este următorul.
moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 4 */ border-radius: 5px; /* IE 9, Safari 5, Chrome */
Tipul de butoane în browsere diferite prezentată în fig. 2.
Orez. 2. Nasturi cu colturi rotunjite
În general, totul este de așteptat. Versiunile mai vechi de IE nu acceptă CSS 3, restul redă corect colțurile de care am nevoie. Din anumite motive, Opera nu afișează fundalul în mod implicit, așa cum fac alte browsere, dar va exista totuși o discuție specială despre Opera.
Acum, pentru partea distractivă, realizarea unui gradient liniar vertical. Pentru aceasta, vor fi folosite din nou stiluri individuale pentru fiecare browser.
fundal: -moz-linear-gradient(#00BBD6, #EBFFFF);
Un gradient specifică un punct de început, un unghi de gradient, o culoare de început și o culoare de final. În cazul nostru, când gradientul merge vertical de sus în jos, este suficient să setați doar culorile, restul parametrilor sunt utilizați implicit.
Chrome, Safari
fundal: -webkit-gradient(liniar, 0 0, 0 100%, de la(#00BBD6), la(#EBFFFF));
Acesta specifică tipul de gradient (liniar), punctul de pornire pentru aplicarea gradientului (colțul din stânga sus), punctul final (colțul din stânga jos) și culorile de început și de sfârșit.
Internet Explorer
filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");
Browserul IE merge pe propriul său drum și pentru efecte diferite aplică proprietatea de filtru, inclusiv pentru gradient. Aici totul este mai banal, se scrie doar culoarea inițială și finală a gradientului.
Opera se odihnește, gradienții nu au fost încă implementați în ea.
Adunarea tuturor proprietăților pentru browsere, colțuri și gradienți (exemplul 1).
Exemplul 1. Butoane cu gradient liniar
A ieșit destul de frumos (Fig. 3), dar există și diferențe evidente față de butonul original - arată plat, ca o placă.
Orez. 3. Vedere butoane cu gradient
Puteți face din nou un buton cu forma dorită cu un gradient, „jucându-se” cu culorile. Două valori de gradient nu mai sunt suficiente, din fericire Firefox și Safari oferă o soluție.
fundal: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);
În loc de două valori, inserăm numărul dorit de culori, gradientul va trece fără probleme de la o culoare la alta.
Chrome, Safari
fundal: -webkit-gradient(liniar, 0 0, 0 100%, de la(#D0ECF4), la(#D0ECF4), color-stop(0,5, #5BC9E1));
Parametrul color-stop specifică punctul în care va fi aplicată noua culoare. Valoarea variază de la 0 la 1.
Exemplul 2: Butoane cu gradient îmbunătățit
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Rezultatul exemplului este prezentat în Fig. 4.
Orez. 4. Gradient, ce fel de gradient ai nevoie
În mod similar, puteți crea orice alte degrade pe un buton sau alt element (Fig. 5). Dar deja fă-o singur, pentru care am adăugat la atelier.
Orez. 5. Butoane atât de diferite
Lasă-mă să rezum. Puteți face un buton cu un gradient și colțuri rotunjite fără imagini. Cu toate acestea, cu browsere, confuzie și tulburare. Opera nu știe deloc să lucreze cu degrade, în IE 9 există o eroare neplăcută la combinarea unui gradient cu colțuri (Fig. 6).
Orez. 6. Suprapunere de fundal de colț în IE 9
Ei bine, în timp ce vom face „lucruri frumoase” pentru Browsere Firefox, Safari și Chrome.
Înainte de a ne ocupa de butoane, să ne uităm la setările care sunt comune tuturor.
HTML
Butoanele vor folosi cod HTML foarte simplu:
Abonati-va
css
De asemenea, toate butoanele vor avea setări comune pentru textul inscripției și deselectarea linkurilor:
ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; culoare: #fff; ) a ( culoare: #fff; text-decor: niciunul; )
De obicei, utilizatorul se așteaptă la un efect destul de ușor atunci când trece mouse-ul peste un link sau un buton. Și în cazul nostru, butonul își schimbă dimensiunea - crește, afișând un mesaj suplimentar.
Codul CSS principal
Pentru început, trebuie doar să dăm butonului o formă și o culoare. Definiți o înălțime de 28 px și o lățime de 115 px, adăugați margini și umplutură și dați butonului un chenar ușor.
#button1 ( fundal: #6292c2; chenar: 2px solid #eee; înălțime: 28px; lățime: 115px; margine: 50px 0 0 50px; umplutură: 0 0 0 7px; overflow: ascuns; afișare: bloc; )
Efecte CSS3
Unora le place când un buton simplu este însoțit de destul de mult cod CSS. LA aceasta sectiune oferă stiluri CSS3 suplimentare pentru butonul nostru. Te poți descurca fără ele, dar dau butonului un aspect mai modern.
Rotunjiți colțurile cadrului și adăugați un gradient. Iată un mic truc cu gradient întunecat care funcționează cu orice culoare de fundal.
/*Colțuri rotunjite*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; chenar-rază: 15px; /*Gradient*/ imagine de fundal: -webkit-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: -moz-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: -o-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: -ms-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: gradient liniar(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2));
Animație CSS
Acum să setăm tranziția CSS. Animația va fi folosită pentru orice modificare a proprietăților și va dura o jumătate de secundă.
Plasarea mouse-ului
Rămâne doar să adăugați un stil pentru a extinde butonul atunci când treceți cu mouse-ul peste el. Butonul trebuie să aibă o lățime de 230 de pixeli pentru a afișa întreaga postare.
#button1:hover ( lățime: 230px; )
Schimbare ușoară a tonului de culoare
Un efect CSS foarte simplu și popular pentru un buton. Când deplasați cursorul mouse-ului se schimbă ușor tonul culorii de fundal.
Codul CSS principal
Codul CSS este foarte asemănător cu exemplul anterior. Se folosește o culoare de fundal diferită, iar forma este ușor modificată. De asemenea, textul este centrat și înălțimea liniei pentru buton este setată astfel încât să fie centrat vertical.
#button2 ( fundal: #d11717; chenar: 2px solid #eee; înălțime: 38px; lățime: 125px; margine: 50px 0 0 50px; overflow: ascuns; afișare: bloc; text-align: center; line-height: 38px; )
Efecte CSS3
Setați rotunjirea colțurilor, gradientul pentru fundal și umbra suplimentară. Folosind rgba facem umbra neagră și transparentă.
/*Colțuri rotunjite*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; raza-chenar: 10px /*Gradient*/ imagine de fundal: -webkit-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: -moz-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: -o-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: -ms-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: gradient liniar(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Animație CSS
Animația este practic aceeași cu exemplul anterior.
/*Tranziție*/ -webkit-transition: Toate 0.5s ușurință; -moz-tranziție: Toate 0.5s ușurință; -o-tranziție: Toate 0.5s ușurință; -ms-transition: Toate 0.5s ușurință; tranziție: toate 0.5s ușurință;
Plasarea mouse-ului
Când treceți cursorul mouse-ului, va fi setată o culoare de fundal diferită. Încercați să alegeți o opțiune de culoare mai deschisă în Photoshop pentru un efect grozav.
#button2:hover (culoare de fundal: #ff3434; )
Acest efect poate fi destul de impresionant în funcție de alegerea imaginii de fundal. Demo-ul folosește un fundal nedescriptiv, iar efectul arată nedescriptiv. Încercați să utilizați o altă imagine și s-ar putea să obțineți un efect uimitor.
Codul CSS principal
Partea principală a codului este aceeași cu exemplele anterioare. Vă rugăm să rețineți că folosim imagine de fundal. Poziția inițială a fundalului este setată la „0 0”. Când treceți cu mouse-ul peste cursor, poziția se schimbă pe verticală.
#button3 ( fundal: #d11717 url("bkg-1.jpg"); poziția fundal: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); dimensiunea fontului: 22px; înălțime : 58px; lățime: 155px; margine: 50px 0 0 50px; overflow: ascuns; afișare: bloc; text-align: center; line-height: 58px; )
Efecte CSS3
În acest exemplu, nu există nimic special - colțuri rotunjite și umbre.
/*Colțuri rotunjite*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; chenar-rază: 5px /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Animație CSS
Animația pentru acest caz este mai lungă pentru a crea un efect neted și interesant.
/*Tranziție*/ -webkit-transition: Toate 0.8s ușurință; -moz-tranziție: Toate 0.8s ușurință; -o-tranziție: Toate 0.8s ușurință; -ms-transition: Toate 0.8s ușurință; tranziție: Toate 0.8s ușurință;
Plasarea mouse-ului
Acum este timpul să mutați imaginea de fundal. Poziția inițială a fost „0 0”. Setați al doilea parametru la 150px. Pentru a vă deplasa orizontal, trebuie să modificați primul parametru.
#button3:hover (poziția de fundal: 0px 150px; )
Apăsare de buton simulată 3D
Ultimul exemplu din tutorialul nostru se concentrează pe metoda populară 3D de a simula un clic pe buton atunci când treceți cu mouse-ul peste acesta. Animația pentru acest caz este atât de simplă încât nici măcar nu necesită o tranziție CSS. Dar rezultatul final este destul de impresionant.
Codul CSS principal
Cod CSS pentru butonul nostru.
#button4 ( fundal: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; înălțime: 58px; lățime: 155px; margine: 50px 0 0 50px; overflow: ascuns ; afișare: bloc; text-align: center; line-height: 58px; )
Efecte CSS3
În acest caz, CSS3 nu mai este o opțiune bună. Pentru a obține efectul, sunt necesare umbre și un gradient. Umbra dură creează aspectul unui buton 3D.
/*Colțuri rotunjite*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; chenar-rază: 5px /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ imagine de fundal: -webkit-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: -moz-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: -o-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: -ms-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); imagine de fundal: gradient liniar(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2));
Plasarea mouse-ului
În acest caz, avem cea mai mare secțiune de hover. Lungimea umbrei este redusă, iar marginile creează o amestecare a zonei întunecate. Toate împreună creează iluzia apăsării unui buton. Întoarcerea gradientului îmbunătățește efectul.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0) , 0, 0, 0,8); umbră casetă: 0px 4px 0px rgba(0, 0, 0, 0,8); /*Gradient*/ imagine de fundal: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); imagine de fundal: -moz-linear-gradient(jos, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) )); imagine de fundal: -o-linear-gradient(jos, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); imagine de fundal: -ms-linear-gradient( jos, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); imagine de fundal: gradient liniar (jos, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )
Mai întâi trebuie să descărcați codul sursă și să selectați o temă de design pentru butoane. Puteți lua designul care vă place. Să luăm ca exemplu prima temă Winona.
Descarca
Articole similare pe acest subiect:
Deschideți fișierul în editor index.html din sursă, găsim eticheta care ne interesează. În cazul meu:
Din acest cod luăm o linie cu clasa buton.
Lipim codul în orice loc necesar în fișierul cu codul proiectului nostru între etichetă
.
Schimbați numele butonului în orice aveți nevoie. În cazul meu, voi schimba numele în „Deschidere”
Copiați-l și inserați-l între etichete în fișierul index al proiectului dvs.
Exemplul arată că un anumit stil este adăugat butonului folosind o clasă suplimentară corespunzătoare numelui temei de design.
În cazul nostru, aceasta este clasa butonul Winona. Prin urmare, stilurile numite winona vor fi adăugate.
Acest lucru este foarte convenabil, deoarece dacă doriți să schimbați designul butoanelor, va trebui doar să înlocuiți numele clasei suplimentare din etichetă . Stilurile sunt deja în fișier. butonul.css!
