Cum să faci o animație cu butonul CSS. Realizarea de nasturi stilați

Vlad Merjevici

Butoane standard create prin etichetă sau , arată bine, desigur, dar încercarea de a-și schimba aspectul prin stiluri duce la un rezultat teribil. Butoanele sunt un semn de cap la interfețele de acum zece ani cu angularitatea lor (Fig. 1). Desigur, o astfel de metamorfoză apare 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

Puteți folosi imagini pentru a schimba radical aspectul unui buton, dar în comparație cu capacitățile CSS 3, această opțiune pare acum făcută acasă.

Voi lua ca bază butonul original din browser, care conține un gradient vertical liniar și margini rotunjite.

Cea mai ușoară modalitate de a rotunji colțurile este să utilizați proprietatea border-radius, oferindu-i 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 */

Aspectul butoanelor în diferite browsere este prezentat în Fig. 2.

Orez. 2. Nasturi cu colturi rotunjite

În general, totul este de așteptat. Versiunile vechi de IE nu acceptă CSS 3, celelalte creează 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 Opera va fi discutată separat.

Acum partea distractivă este realizarea unui gradient liniar vertical. Pentru a face acest lucru, 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; parametrii rămași 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 (colțul din stânga sus), punctul final (colțul din stânga jos), precum și culorile 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, sunt scrise doar culorile de început și de sfârșit ale gradientului.

Opera se odihnește; gradienții nu au fost încă implementați.

Adunăm toate proprietățile pentru browsere, colțuri și gradienți (exemplul 1).

Exemplul 1: Butoane cu gradient liniar

butonul Acasă

Buton nou

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 buton cu gradient

Puteți crea din nou un buton cu forma dorită folosind 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, introduceți numărul dorit de culori, gradientul va trece ușor 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 este necesar

În mod similar, puteți crea orice alte degrade pe un buton sau alt element (Fig. 5). Dar fă asta singur, motiv pentru care l-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, există confuzie și vacillare cu browserele. Opera nu poate funcționa deloc cu degrade, în IE 9 există o eroare neplăcută atunci când combinați un gradient cu colțuri (Fig. 6).

Orez. 6. Suprapunerea fundalului pe colțuri în IE 9

Ei bine, deocamdată vom face „frumusețe” pentru browserele Firefox, Safari și Chrome.

Înainte de a ne uita la butoane, să ne uităm la setările comune tuturor acestora.

HTML

Butoanele vor folosi cod HTML foarte simplu:

Abonati-va

CSS

De asemenea, toate butoanele vor avea setări comune pentru textul subtitrării și deselectează linkurile:

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 moale 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 de bază

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, de asemenea, 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; depășire: ascuns; afișare: bloc; )

Efecte CSS3

Unora le place când un buton simplu este însoțit de destul de mult cod CSS. Această secțiune oferă stiluri CSS3 suplimentare pentru butonul nostru. Te poți descurca fără ele, dar ele dau butonului un aspect mai modern.

Rotunjiți colțurile cadrului și adăugați un gradient. Aceasta folosește un mic truc cu un gradient întunecat care interacț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ă.

Mouse-ul peste

Tot ce rămâne este să adăugați un stil pentru a extinde butonul atunci când treceți mouse-ul peste el. Butonul trebuie să aibă o lățime de 230 px pentru a afișa întregul mesaj.

#button1:hover (lățime: 230px; )

Simplă schimbare a tonului de culoare

Un efect CSS foarte simplu și popular pentru un buton. Când treceți cursorul mouse-ului, tonul culorii de fundal se schimbă ușor.

Codul CSS de bază

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, centrează textul și setează înălțimea liniei pentru buton, astfel încât să aibă loc centrarea 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, un gradient pentru fundal și o umbră suplimentară. Folosind rgba facem umbra neagră și transparentă.

/*Colțuri rotunjite*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; chenar-rază: 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 nu este practic diferită de exemplul precedent.

/*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ță;

Mouse-ul peste

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 efectul poate fi uimitor.

Codul CSS de bază

Partea principală a codului este aceeași cu exemplele anterioare. Vă rugăm să rețineți că folosim o imagine de fundal. Poziția inițială de fundal este setată la „0 0”. Când treceți cursorul, 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

Nu există nimic special în acest exemplu - 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 durează mai mult 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ță;

Mouse-ul peste

Acum este timpul să mutați imaginea de fundal. Poziția de pornire 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; )

Simulare de apăsare a butoanelor 3D

Ultimul exemplu din lecția noastră este despre metoda populară 3D de a simula apăsarea unui buton atunci când treceți cursorul mouse-ului peste ea. 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 de bază

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 încetează să fie o opțiune frumoasă. Pentru a obține efectul, sunt necesare umbre și un gradient. O umbră ascuțită 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));

Mouse-ul peste

În acest caz avem cea mai mare secțiune de hover. Lungimea umbrei este redusă, iar marginile sunt folosite pentru a crea un amestec al 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)); )

Salutări tuturor celor care citesc această publicație! În articolul de astăzi voi răspunde la una dintre cele mai frecvente întrebări: „Cum este creat un buton 3D folosind instrumente CSS?” Acest subiect nu este ușor, așa că vă sfătuiesc să studiați cu atenție materialul teoretic și practic oferit mai jos.

După ce ați citit articolul, veți afla nu numai ce etichete și proprietăți ale limbilor web ar trebui folosite pentru a crea un buton pe o pagină online, ci și să vă scufundați în secțiuni mai profunde ale CSS. Prin aceasta mă refer la pseudo-clase și diverse efecte dinamice. În plus, vă puteți crea propriile programe, pe baza exemplelor mele. Asadar, haideti sa începem!

Instrumente de bază pentru crearea butoanelor

Există două etichete în limbajul de marcare care pot fi folosite pentru a crea un buton pe un site web. Acest < butonul>și vă sunt familiare < intrare>.

Abonații mei care au citit publicațiile anterioare, precum și cei care au lucrat puțin cu elementul < intrare>, ei știu că acest instrument vă permite să creați nu numai butoane, ci și alte obiecte personalizate. De exemplu, câmpuri de text, liste, butoane radio etc. Toate acestea se întâmplă datorită atributului tip.

A doua etichetă este < butonul>. În esență, funcționează în același mod ca elementul descris mai sus. Ca < intrare>, < butonul> trebuie plasat în interiorul recipientului < formă>. Un buton creat nu în acesta va fi afișat corect, dar nu va transmite informații către server.

Cu toate acestea, această etichetă are unele diferențe. Asa de, < butonul> oferă dezvoltatorilor mai multe opțiuni pentru formatarea și stilarea butoanelor pe care le creează.

Pentru claritate, mai jos am atașat un exemplu de implementare software a elementelor descrise:

Ce sunt aceste „pseudo-clase”?

La rularea primului exemplu, în fereastră au fost afișate butoane roz absolut identice, singura diferență fiind un cuvânt. Prima și importantă etapă a fost finalizată. Ați învățat cum să inserați butoane pe paginile site-ului web.

Cu toate acestea, trebuie să recunoașteți că în această formă nu sunt interesante și sunt prea obișnuite. De aceea vom începe să stăpânim pseudo-clase.

Pseudo-clase sunt responsabili pentru comportamentul dinamic al obiectelor definite pe resursele web. Cred că fiecare dintre voi ați observat cum, atunci când treceți cursorul peste un link sau un câmp, se schimbă. Deci aceasta este acțiunea pseudo-claselor.

Pentru a defini acest tip de comportament, utilizați „:” urmat de numele stării obiectului.

Acordați atenție aspectului general al reclamei:

Selector (adică element): pseudo-clasă (definirea caracteristicilor stilului)

Mecanismul descris poate fi aplicat:

• la identificatorii standard: a:hover( text-shadow: 0 -1px 9px albastru;);
• la selectoarele pe care le-ați inițializat: #aa:concentrare(Culoarea albastra;).

Toate pseudoclasele existente sunt împărțite în 3 grupuri, fiecare dintre ele fiind responsabilă pentru:

• starea obiectelor (vizitate, hover, link, focus, active);
• elemente copil (primul copil);
• limba conținutului textului (lang).

Întrucât publicația se referă la butoane dinamice volumetrice, voi vorbi despre câteva elemente ale grupului responsabile de starea obiectelor.

Exemple de butoane neobișnuite

Ți-am spus tot ce ai nevoie în teorie, iar acum să trecem la practică. Vreau să arăt 2 soluții interesante pentru prezentarea butoanelor.

Acest program creează un buton animat tridimensional, când faceți clic pe el, acesta din urmă este „apăsat” datorită proprietății transforma.

Am terminat cu eticheta Button

Aș dori să notez că < butonul> acceptă și afișarea imaginilor. Prin urmare, am scris următorul exemplu pe baza celui precedent, adăugând câteva puncte.

1. Declarația butonului a fost schimbată în șir

   schimb valutar

   ;
2. Următoarele au fost adăugate la marcajul de stil:

   1 2 3 4 5 6 7 8 9

   img ( afișare: bloc; lățime: 200px; înălțime: 70px; float: stânga; ) p ( padding-top:10px; );

   img ( afișare: bloc; lățime: 200px; înălțime: 70px; float: stânga; ) p ( padding-top:10px; );

Bună, dragi prieteni. Astăzi vă voi spune despre două moduri care vă vor ajuta să creați un buton animat pentru site-urile dvs. web. Probabil că ați văzut multe dintre aceste butoane și ați dat clic pe ele. Așadar, pe blogul meu recomand periodic cursuri și traininguri afiliate, doar pe cele pe care le-am încercat eu însumi. Și bineînțeles că mă interesează statisticile, iar statisticile spun că oamenii dau clic pe butoanele atractive cu 48% mai des decât pe link-urile obișnuite.

Principiul creării de butoane animate folosind CSS este următorul; există trei prevederi. 1 - Inițială, 2 - când treceți cursorul și 3 - când apăsați butonul mouse-ului. Unele servicii au toate cele trei prevederi, în timp ce altele au doar două. Dar principalul lucru este că ești mulțumit de rezultatul final.

Tutorial video despre a doua metodă de creare a butoanelor animate:

De exemplu, să ne uităm la serviciul CSS3 ButtonGenerator; are doar două prevederi. Dar efectele arată foarte bine. Cine este confuz de lipsa limbii ruse, folosește ultimul generator din listă.

Deci să începem.

Deschideți pagina principală a serviciului. Inițial, veți vedea o vedere preliminară a butonului și a instrumentelor care vă permit să faceți tot felul de setări.

Prima secțiune, Text&Font, este responsabilă pentru text, dimensiunea fontului, culoarea fontului, umbra fontului. Aici scrieți eticheta pe buton, îi setați dimensiunea, culoarea și umbra.

Următoarea secțiune, Fundal, se referă la fundal. Aici puteți specifica culoarea butonului, gradientul butonului, dimensiunea butonului și amestecul de fundal.

Secțiunea Border este responsabilă pentru setarea umbrei și marginilor butonului. Puteți regla cu ușurință grosimea chenarului, rotunjirea colțurilor și umbra butonului.

Următoarea secțiune, Transformare, este responsabilă pentru transformarea butonului - rotații, deplasări și distorsiuni.

Următoarea secțiune, Tranziție, este responsabilă pentru netezimea animației. Setați aceste setări în conformitate cu butonul dvs. Acțiunile pot fi aplicate întregului buton sau straturilor individuale.

După ce ai încercat de mai multe ori, experimentează cu setările și vei înțelege ce este.

După ce apariția inițială a butonului este configurată, puteți trece la etapa următoare. Aceasta este o modificare a butonului atunci când treceți cursorul mouse-ului. Pentru a face acest lucru, faceți clic pe caseta de selectare indicată în captură de ecran.

Opțiuni pentru trecerea mouse-ului

Acum toate modificările pe care le faceți setărilor sunt pentru butonul care va fi afișat când treceți mouse-ul peste el. Și aceste setări depind individual de fiecare buton. De exemplu, am schimbat setările de rotație, gradient și umbră.

Când butonul este gata, puteți trece la instalarea butonului din articol. Pentru a face acest lucru, instalați codul în locul necesar din articol:

Iată exemplul nostru:

Ei bine, acum știi cum să faci ușor și rapid un buton animat pentru un site web sau blog. Încercați și implementați, merită. Dacă aveți întrebări, scrieți în comentarii, voi încerca să vă ajut.

Asta e tot pentru azi, iti doresc mult succes. Și mereu mă bucur să te văd pe paginile blogului meu.

P.S. Și iată un exemplu de buton animat pentru instruirea lui Denis Gerasimov „Configurarea traficului rece pentru a promova linkurile afiliate”. Am finalizat acest antrenament și îl recomand tuturor - fără exagerări inutile, acesta este un mod real de a câștiga bani pe programele de afiliere. Ceea ce practic este ceea ce fac.

Astăzi vreau să vă spun cum să faceți butoane elegante folosind CSS pur. Vom crea 4 stiluri, acestea sunt butoane umplute cu o singură culoare, butoane care sunt înconjurate de un chenar, un stil de buton cu umbră și umplere, iar ultimele 4 stiluri sunt butoane cu efect de clic. Vom face toate aceste bune fără să folosim niciun script, folosind doar 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. Vom seta, de asemenea, clase pentru aplicarea efectului atunci când trecem cu mouse-ul și activăm butonul viitor. În general, iată codul în sine:

Buton :planare :activ Buton :planare :activ Buton :planare :activ Buton :planare :activ

Stiluri CSS pentru toate butoanele

Diferitele browsere afișează unele reguli CSS standard ușor diferit. Prin urmare, î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. Ei bine, acum haideți să aruncăm o privire mai atentă la fiecare dintre cele 4 stiluri ale butoanelor noastre elegante.

Butoane plate umplute cu fundal

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

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

Codul CSS pentru aceste butoane este foarte simplu. Acesta mi se pare un mare plus:

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; )

Stilați butoanele cu chenare sau chenare

Acest stil de butoane este în aceeași clasă cu butoanele plate.Singura diferență este că aici eliminăm umplerea și, în schimb, stabilim reguli pentru afișarea marginii butoanelor. Această imagine arată totul clar:

Și, ca de obicei, codul CSS este foarte simplu, doar adăugăm reguli 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 cu ușurință învechit, dar și acum poate fi găsit pe Internet. Dacă aceste butoane se potrivesc stilului site-ului dvs., atunci sunt doar pentru dvs. De asemenea, sunt foarte ușor de făcut, iată o imagine:

În CSS vom folosi regulile de umplere cu umbre și gradient. Când treceți cu mouse-ul, va apărea o umbră în jurul butonului și când se face clic î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. Aici puteți vedea detaliile din imagine:

CSS-ul de aici este puțin mai complex și necesită puțină matematică. Dar acest lucru poate fi ușor de înțeles. În general, nu este chiar atât de înfricoșător. Vom plasa o umbră neîncețoșată sub buton, astfel încât să dea efectul unui buton 3D sau să pară să iasă puțin în afară. Când treceți 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 impresionant și mai neted, vom adăuga o transformare CSS3 (translateY). În acest fel, butonul se va mișca ușor în jos. Ș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 butoane stilate și moderne pe care le poți folosi pentru nevoile tale. Desigur, le puteți schimba până când sunt de nerecunoscut, acesta este doar cel mai simplu exemplu de implementare a acestui tip de butoane. Sper că v-a plăcut această lecție. Pe curând!