Vlad Merjevici

Butoane standard creat prin etichetă sau , desigur, arată bine, dar încercarea de a-și schimba aspectul prin stiluri duce la rezultate groaznice. Butoanele sunt un salut pentru interfețele vechi de zece ani cu angularitatea lor (Fig. 1). Desigur, această metamorfoză are loc numai atunci când se utilizează proprietățile de fundal și chenar, cu alte cuvinte, nu puteți schimba culoarea de fundal a butonului și chenarul din jurul acestuia.

Orez. 1. Buton original și modificat

Pentru a schimba radical aspectul unui buton, puteți folosi imagini, dar în comparație cu Capabilitati 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 simplu lucru 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));

Aici specificați tipul de gradient (liniar), punctul de pornire al aplicației de gradient (stânga colțul de sus), punctul final(colțul din stânga jos), precum și culoarea de început și de sfârșit.

Internet Explorer

filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");

Browserul IE merge pe drumul său și folosește proprietatea filtrului pentru diferite efecte, inclusiv gradientul. 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

butonul Sursă

Buton nou

A ieșit destul de frumos (Fig. 3), dar există și diferențe clare de la butonul original - arată plat ca o placă.

Orez. 3. Vedere buton cu gradient

Faceți butonul forma dorită puteți folosi din nou un gradient, „jucându-vă” 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. patru.

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.

În acest articol, vom acoperi mai multe moduri de a crea butonul CSS . Dar înțelegerea diferenței dintre Flat UI și Material Design nu are sens dacă nu știi ce componente să folosești. Să parcurgem rapid elementele de bază ale creării de butoane cu CSS.

Buton CSS Basics

Există mai multe standarde de butoane „non-tehnice”:

1. Accesibilitatea este primordială. Utilizatori din handicapat iar browserele mai vechi ar trebui să aibă acces ușor la butoane;
2. Text simplu - scrieți text simplu și scurt pe butoane. Utilizatorii ar trebui să înțeleagă imediat scopul butonului și unde îi va duce.

Aproape toate butoanele de pe web folosesc efecte de schimbare a culorii chenarului și umbrelor. Acest lucru se poate face folosind pseudo-clase. Ne vom concentra pe două dintre ele: :hover și :active . Pseudoclasa :hover este responsabilă pentru comportamentul CSS la trecerea mouse-ului. Codul :activ atunci când utilizatorul a apăsat butonul mouse-ului, dar nu l-a eliberat încă.

Cu ajutorul pseudo-claselor, vă puteți schimba complet aspect butoane, dar aceasta este o abordare incomodă. Pentru începători, este mai bine să editați stilurile de bază ale butonului, păstrând aproape complet aspectul acestuia. În implementare element dat controlul poate fi împărțit în trei aspecte principale - culoare, umbre și timpul de tranziție.

Culoare

Schimbare culoare css butoanele pot fi realizate cu diverse proprietăți: culoare, culoare de fundal și chenar. Mai întâi, să ne dăm seama cum să alegem culoarea butonului:

1. Combinații de culori– folosiți culori care se completează reciproc. Colorhexa- un instrument excelent pentru găsirea culorilor potrivite;
2. Respectarea paletei- dacă sunteți în căutarea unei palete de culori, accesați lolcolors.

Umbre

Box-shadow poate fi folosit pentru a adăuga o umbră în jurul unui obiect. Această idee este implementată în Flat UI și Material Design. Puteți citi mai multe despre proprietatea box-shadow la MDN.

Timp de tranziție lină

Proprietatea durată de tranziție adaugă un interval de timp Modificări CSS. Stilurile de butoane fără o tranziție lină sunt schimbate instantaneu în stiluri de pseudo-clasă :hover, ceea ce poate speria utilizatorul. În exemplul următor, stilul butonului se schimbă ușor (în 0,5 s ): to :hover :

Schimbarea culorii ( chenar-rază: 5px; dimensiunea fontului: 20px; umplutură: 14px 80px; cursor: indicator; culoare: #fff; culoarea fundalului: #00A6FF; dimensiunea fontului: 1.5rem; familia de fonturi: "Roboto "; greutate font: 100; chenar: 1px solid #fff; umbră casetă: 2px 2px 5px #AFE9FF; durata tranziției: 0,5 s; -webkit-durată-tranziție: 0,5 s; -moz-durată-tranziție: 0,5 s; ) .color-change:hover (culoare: #006398; chenar: 1px solid #006398; box-shadow: 2px 2px 20px #AFE9FF; )

Și arată așa:

Vezi exemplu

Cod pentru tranziții netede browserele complexe și mai vechi gestionează animația în mod diferit. Prin urmare, trebuie să adăugați prefixe pentru browserele mai vechi:

durata tranziției: 0,5s /* intrare regulată, funcționează în toate browserele moderne */ -webkit-transition-duration: 0.5s; /* Ajută unii versiuni safari, Chrome și Android */ -moz-transition-duration: 0.5s; /* pentru Firefox */

Resetează stilurile butoanelor

Pentru ca browserul să stabilească stilul implicit al butonului CSS , puteți seta stiluri personalizate:

button.your-button-class ( -webkit-appearance: none; -moz-appearance: none; )

Este mai bine să aplicați acest lucru la clasele de elemente de buton, decât la fiecare buton individual.

Trei stiluri de butoane

1 - alb-negru simplu

Vezi exemplu

Aceste butoane merg bine cu multe diverse stiluri. Acest efect se bazează pe contrastul alb-negru.

Luați în considerare codul pentru un buton negru cu fundal alb. Pentru a recolora butonul într-o culoare diferită, schimbați butonul stiluri css toate valorile alb și negru pe alocuri:

Suit_and_tie (color: white; font-size: 20px; font-family: helvetica; text-decoration: none; chenar: 2px solid white; border-radius: 20px; transition-duration: .2s; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; fundal-culoare: negru; umplutură: 4px 30px; ) .suit_and_tie:hover (culoare: negru; fundal-culoare: alb; tranziție-duration: .2s; -webkit- durata-tranziției: .2s; -moz-durata-tranziției: .2s; )

În stilurile de mai sus, puteți vedea că proprietățile font și culoarea de fundal își schimbă valorile cu proprietatea transition-duration.2s. Puteți lua culorile mărcilor dvs. preferate și vă puteți crea propriul buton. Culorile mărcii pot fi găsite la BrandColors.

2- Butoane plate UI

Flat UI subliniază minimalismul în butonul HTML CSS − mai multă acțiune, mai puțină mișcare. De obicei, trec de la butoanele alb-negru la Flat UI pe măsură ce proiectul meu începe să prindă contur. Butoanele plate UI au un aspect minimalist și se potrivesc cu majoritatea modelelor.

Să ne îmbunătățim butonul adăugându-i mișcare pentru a simula un efect 3D.

Vezi exemplu

Ne vom uita la primul buton:

Turcoaz ( margine-dreapta: 10px; lățime: 100px; fundal: #1abc9c; chenar-jos: #16a085 3px solid; chenar-stânga: #16a085 1px solid; chenar-dreapta: #16a085 1px solid; chenar-rază: 6px; text-align: center; culoare: alb; umplutură: 10px; float: stânga; font-size: 12px; font-weight: 800; ) .turquoise:hover (opacitate: 0,8; ) .turquoise:activ (lățime: 100px; fundal: #18B495; chenar-jos: #16a085 1px solid; chenar-stânga: #16a085 1px solid; chenar-dreapta: #16a085 1px solid; chenar-rază: 6px; text-align: center; culoare: alb; umplutură: 10px; margine-sus: 3px; ]] float: stânga; )

Butonul CSS are trei stări: normal, :hover și :activ .

:hover conține doar o singură linie de cod pentru a reduce opacitatea pentru a face butonul un pic mai deschis, deci nu trebuie să alegem o culoare mai deschisă.

În loc să dea un solid marginea cadrului, folosește proprietățile chenar-jos , chenar-stânga și chenar-dreapta pentru a crea un efect de adâncime 3D.

Pseudo-clasa :active este adesea folosită în butoanele Flat UI. Când butonul nostru devine :activ se întâmplă două lucruri:

1. :border-bottom se modifică de la 3px la 1px . Umbra de sub buton este redusă, iar butonul este coborât cu câțiva pixeli. Această modificare permite utilizatorului să simtă că a apăsat un buton;
2. Culoarea de fundal se întunecă, simulând trecerea butonului de la utilizator la ecran. Ceea ce reamintește și utilizatorului că a apăsat butonul.

Interfața de utilizare plată valorează mișcările minimaliste ale butoanelor, „ spune mare poveste ". Mulți imită schimbarea butoanelor cu :border-bottom . Este de remarcat faptul că în Flat UI există butoane care nu se mișcă deloc, ci doar își schimbă culoarea.

design material

Material Design este o abordare de design care promovează ideea de a transmite informații sub formă de carduri cu diverse animații pentru a atrage atenția. Google listat pe pagină Pagina de pornire Material Design trei principii principale:

• Cuvântul „Material” este o metaforă;
• Monotonie, grafică, agresivitate;
• Mișcarea transmite sens.

Pentru a înțelege mai bine aceste trei principii, să aruncăm o privire la Material Design în acțiune:

Vezi exemplu

Aceste butoane CSS implementează două idei principale - proprietatea box-shadow și Polymer .

Polymer este un cadru pentru crearea de site-uri web. Cu acesta, efectul unui val de răspândire pe butoane este adăugat doar cu o singură linie de cod:

- Componentă polimerică. Prin includerea cadrului chiar la începutul HTML, obținem acces la componentele acestuia. Puteți afla mai multe despre capacitățile cadrului pe site. proiect polimer.

Acum să vorbim despre codul CSS care îl implementează Principii materiale Design:

body ( culoare de fundal: #f9f9f9; font-family: RobotoDraft, "Helvetica Neue"; ) /* Buton */ .button ( afișare: bloc inline; poziție: relativă; lățime: 120px; înălțime: 32px; înălțime linie : 32px; chenar-rază: 2px; dimensiunea fontului: 0.9em; culoarea fundalului: #fff; culoarea: #646464; margine: 20px 10px; tranziție: 0.2s; întârziere tranziție: 0.2s; umbră casetă: 0 2px 5px 0 rgba(0, 0, 0, 0.26); .button:activ (box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); tranziție-întârziere: 0s; ) /* Diverse * / .button.grey (culoare de fundal: #eee; ) .button.blue (culoare de fundal: #4285f4; culoare: #fff; ) .button.green (culoare de fundal: #0f9d58; culoare: #fff; ) .center ( text-align: center; )

Toate butoanele CSS utilizează proprietatea box-shadow. Să eliminăm tot codul CSS neschimbat și să vedem cum funcționează box-shadow:

Buton ( tranziție: 0,2 s; întârziere tranziție: 0,2 s; umbră casetă: 0 2px 5px 0 rgba(0, 0, 0, 0,26); ) .button:activ (întârziere tranziție: 0s; umbră casetă: 0 8px 17px 0 rgba(0, 0, 0, 0,2); )

Proprietatea box-shadow este folosită în stilurile CSS pentru butoane pentru a adăuga o umbră întunecată subtilă în stânga și în josul fiecărui buton. Când este apăsată, umbra se mărește ușor și devine mai deschisă. Această mișcare imită efectul unei umbre 3D care pare să sară de pe pagină către utilizator. Efectul este scris în Stiluri materiale Designul și principiile sale.

Î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.

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:

2. Butoanele Google.

Exemplu de conexiune:

3. Butoane cu gradient CSS3.

Exemplu de conexiune:

H3

4. Butonul Kick-Ass CSS3.

5. Pictograme CSS pure pentru rețelele sociale.

Exemplu de conexiune:

• Facebook
• Stare de nervozitate
• RSS
• Flickr
• Delicios
• LinkedIn
• Google
• Orkut
• Technorati
• NetVibes

6. Butoane CSS3 extrem de fanteziste.

Toate proprietarii de iOS dispozitivele 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:

7. Bonbon: Dulci butoane CSS3.

Exemplu de conexiune:

8. Butoane CSS3 cu aspect realist

Exemplu de conexiune:

9. Butoane simple CSS3 Github.

Exemplu de conexiune:

10. Butoane flexibile de comutare CSS3.

Exemplu de conexiune:

Astăzi vreau să vă spun cum să faceți nasturi stilați pe CSS pur. Vom face 4 stiluri, acestea sunt butoane umplute cu o singură culoare, butoane care sunt înconjurate de un chenar, stilul de butoane cu umbră și umplere, iar ultimele 4 stiluri sunt butoane cu efect de apăsare. Vom face toate aceste bune fără a folosi niciun script, doar în CSS.

Demo I

Cod HTML pentru butoane

Codul HTML pe care îl vom folosi este foarte simplu. Pentru fiecare dintre butoane, vom defini clase separate. De asemenea, vom seta clase pentru aplicarea efectului de hover și pentru activarea butonului viitor. Practic, iată codul:

buton :planare :activ buton :planare :activ buton :planare :activ buton :planare :activ

Stiluri CSS pentru toate butoanele

Diverse browsere unele standard regulile css afișează ușor diferit. Potrivit acesteia în următorul cod CSS vom reseta toate stilurile și vom adăuga câteva valori implicite. Iată cum arată codul:

Buton (afișare: bloc inline; marjă: 0 10px 0 0; umplutură: 15px 45px; dimensiunea fontului: 48px; familia de fonturi: „Bitter”, serif; înălțimea liniei: 1,8; aspect: niciunul; umbră casetă: niciunul; chenar-rază: 0; ) buton:focus (contur: niciunul)

Nu este deloc greu. Deocamdată, haideți să aruncăm o privire mai atentă la fiecare dintre cele 4 stiluri ale nasturii noastre elegante.

Butoane plate umplute cu fundal

Acest tip de buton este foarte popular în zilele noastre, deoarece se potrivește tuturor tendințele actuale web design. Cu alte cuvinte, asta stil plat sau design plat. Mai mult, oamenii sunt obișnuiți cu astfel de butoane și fac clic de bunăvoie pe ele.

Această imagine arată trei stări de buton, normal (implicit), la trecerea cu mouse-ul și la clic sau acțiune:

CSS pentru aceste butoane este foarte simplu. Acesta este un mare plus în opinia mea.

Buton Section.flat (culoare: #fff; culoare de fundal: #6496c8; umbră text: -1px 1px #417cb8; chenar: niciunul; ) section.flat button:hover, section.flat button.hover (culoare de fundal: #346392; text-shadow: -1px 1px #27496d; ) section.flat button:activ, section.flat button.active (culoare fundal: #27496d; text-shadow: -1px 1px #193047; )

Stil buton cu chenare sau chenare

Acest stil de buton este în aceeași clasă cu butoanele plate.Singura diferență este că aici eliminăm umplerea și, în schimb, setăm regulile de afișare a chenarului butonului. Această imagine arată totul clar:

Și, ca de obicei, codul CSS este foarte simplu, adăugăm doar regulile pentru ca marginea să apară:

Buton Section.border (culoare: #6496c8; fundal: rgba(0,0,0,0); chenar: solid 5px #6496c8; ) section.border button:hover, section.border button.hover (border-color: # 346392; culoare: #346392; ) section.border button:activ, section.border button.active (border-color: #27496d; culoare: #27496d; )

Butoane cu umbră și gradient în CSS

Acest stil de butoane poate fi numit în siguranță deja depășit, dar chiar și acum poate fi găsit pe Internet. Dacă aceste butoane se potrivesc stilului site-ului tău, atunci sunt pentru tine. De asemenea, sunt făcute foarte simplu, iată o imagine:

În CSS, vom folosi regulile de umplere cu gradient și umbre. La trecerea mouse-ului, umbra va apărea în jurul butonului, iar la clic, va apărea în interior.

Butonul Section.gradient (culoare: #fff; text-shadow: -2px 2px #346392; background-color: #ff9664; background-image: linear-gradient(sus, #6496c8, #346392); case-shadow: inset 0 0 0 1px #27496d; chenar: niciunul; border-radius: 15px; ) section.gradient button:hover, section.gradient button.hover (box-shadow: insert 0 0 0 1px #27496d,0 5px 15px #193047; ) section.gradient button:activ, section.gradient button.active ( umbră casetă: insert 0 0 0 1px #27496d, insert 0 5px 30px #193047; )

Efect de clic elegant

Acest stil este, de asemenea, foarte popular acum și este utilizat pe scară largă în designul site-urilor web. Utilizatorului i se pare că butonul este de fapt apăsat. Iată poza în detaliu:

CSS-ul de aici este puțin mai complicat și necesită puțină matematică. Dar chiar și acest lucru poate fi ușor de înțeles. În general, nu este chiar atât de înfricoșător. Sub buton, vom plasa o umbră neîncețoșată, astfel încât să dea efectul unui buton 3D sau să pară să iasă puțin în afară. Când trecem cu mouse-ul peste butoane, vom întuneca fundalul. Și când utilizatorul face clic pe buton, vom schimba poziția butonului în sine în stiluri. Și pentru a face totul să arate mai spectaculos și mai neted, vom adăuga o transformare CSS3 (translateY). Astfel, butonul va cădea fără probleme. Și aici este codul CSS în sine:

Buton secțiune.apăsați (culoare: #fff; culoarea fundalului: #6496c8; chenar: niciunul; rază chenar: 15px; umbră casetă: 0 10px #27496d; ) buton.apăsați secțiune:hover, secțiune.apăsați butonul.hover ( culoare de fundal: #417cb8 ) section.press button:activ, section.press button.active (culoare de fundal: #417cb8; box-shadow: 0 5px #27496d; transform: translateY(5px); )

Demo I

Concluzie

Asta e tot! Acum ai stilat și butoane moderne pe care le puteți folosi pentru nevoile dvs. Desigur, le puteți schimba până când nu sunt recunoscute, acesta este doar cel mai simplu exemplu de implementare. acest fel butoane. Sper că v-a plăcut această lecție. Ne vedem în curând!