Creați butoane animate folosind CSS3. Cum să creezi butoane elegante folosind CSS pur Cum să faci un buton rotund în html

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:

Ca 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ă de transformarea butonului - rotație, deplasare, distorsiune.

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.

Salutare dragi cititori. Am studiat deja multe dintre proprietățile care au apărut în CSS3, dar doar cunoașterea lor nu este suficient. Neapărat trebuie să exersați! Și astăzi vă voi arăta...

Să deschidem fișierul index.htmlși creați o structură simplă

Nimic special. Doar 3 bloc cu clasa .buton Să trecem la stiluri acum.

Corp (

}

Buton (
display: inline-block;
marja: 40px;
lățime: 100px;
înălțime: 100px;
fundal: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
cursor: pointer;
raza-limită: 50%;

inserție 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);
}

Am luat fundalul pentru document și butoanele noastre de pe site subtlepatterns.com.

Noi le facem pe ale noastre div line-block, astfel încât să se alinieze orizontal, le setăm înălțimea, lățimea, indentarea de la marginile browserului, rotunjirea 50% pentru a obține un cerc, iar când trecem cursorul facem indicator. Nu este nimic complicat aici, dar nu degeaba am separat umbra în stiluri, pentru că Aceasta este exact partea care poate cauza dificultăți, deși totul este simplu și acolo și veți vedea asta acum.

După ce am stabilit prima umbră, vom vedea deja conturul cercului nostru:

Box-shadow: 0 3px 20px rgba(0,0,0,.25);

Apoi întrebăm umbra interioara, astfel încât să avem o astfel de fereastră deasupra, iar butonul devine mai voluminos.

Box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6);

Următoarea umbră exterioară este necesară pentru a întuneca ușor zona de sub butonul de mai jos, iar următoarea interioară întunecă spațiul din interiorul butonului pentru un efect mai mare)

Box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);

După cum puteți vedea, la început pare complicat, există multe proprietăți, dar dacă vă uitați la ele, totul se dovedește a fi mult mai simplu. Deci, iată rezultatul nostru final:

Acum să implementăm comportamentul pe hover pe bloc

Buton: hover (
casetă-umbră: inserție 0 0 20px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.4),
inset 0 2px 0 rgba(0,0,0,.1);
}

Ne-am ocupat deja de umbrele din bloc, acum încearcă să-ți dai seama singur ce se întâmplă când treci cu mouse-ul. De asemenea, lăsați doar o umbră și vedeți ce se întâmplă, apoi adăugați o a doua și vedeți ce se schimbă și așa mai departe.

În cele din urmă, să adăugăm pictograme la butoanele noastre, astfel încât să nu devină prea plictisitor. Pentru a face acest lucru, să ne schimbăm puțin html

Btn-foto (
fundal: url(http://defaultticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-camera-photo_0.png) centru central no-repeat;
}

Setări Btn (
fundal: url(http://defaultticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/settings.png) centru centru fără repetare;
}

Btn-tag (
fundal: url(http://defaultticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/tag.png) centru centru no-repeat;
}

Aici pur și simplu adăugăm un al doilea fundal pentru fiecare buton, luând pictogramele de pe site defaulticon.com.

Asta este. Azi ne-am uitat la cum se creează butoane rotunde în css3.

Toată lumea s-a săturat de mult de colțurile dreptunghiulare tradiționale în designul site-urilor web. La modă sunt colțurile rotunjite, care sunt realizate nu folosind imagini, ci prin stiluri, pentru care se folosește proprietatea border-radius. Această proprietate poate avea una, două, trei sau patru valori separate printr-un spațiu, care determină raza tuturor colțurilor sau fiecare în parte.

În tabel 1 arată un număr diferit de valori și tipul de bloc care se obține în acest caz.

Cod	Descriere	Vedere
div ( chenar-rază: 10px; )	Raza de rotunjire pentru toate colțurile simultan.
div ( chenar-rază: 0 10px; )	Prima valoare setează raza colțurilor din stânga sus și din dreapta jos, a doua valoare setează raza din dreapta sus și din stânga jos.
div ( chenar-rază: 20px 10px 0; )	Prima valoare stabilește raza colțului din stânga sus, a doua - atât dreapta sus, cât și stânga jos, iar a treia valoare - dreapta jos.
div ( chenar-rază: 20px 10px 5px 0; )	Setează secvenţial raza colţurilor din stânga sus, din dreapta sus, din dreapta jos şi din stânga jos.

Exemplul 1 arată cum să creați un bloc cu colțuri rotunjite.

Exemplul 1. Colțurile unui bloc

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Bloc cu colțuri rotunjite

Un efect interesant poate fi obținut dacă setați raza de rotunjire mai mare de jumătate din înălțimea și lățimea elementului. În acest caz, veți obține un cerc. Exemplul 2 arată cum să creați un buton rotund cu o imagine.

Exemplul 2: Buton rotund

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Buton rotund

În browserul Opera, rotunjirea la se aplică incorect dacă o chenar nu este specificată prin proprietatea border.

Proprietatea border-radius poate fi combinată cu alte proprietăți, de exemplu, adăugarea unei umbre unui element. În exemplul 3, se realizează un set de cercuri, dintre care unul este evidențiat folosind box-shadow . Acest set poate fi folosit pentru a naviga prin pagini sau fotografii.

Exemplul 3. Strălucire

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Strălucește în jurul cercului

Folosind raza de margine, puteți crea nu numai un cerc, ci și o elipsă, precum și o rotunjire eliptică pentru un bloc. Pentru a face acest lucru, trebuie să scrieți nu o valoare, ci două, separate printr-o bară oblică. Scrierea 20px/10px înseamnă că raza orizontală a fileului va fi de 20 pixeli, iar raza verticală va fi de 10 pixeli. Exemplul 4 arată cum să creați colțuri eliptice pentru a adăuga o legendă în stil benzi desenate la o fotografie.

Exemplul 4: Elipse

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Ești propriul tău profesor

Rezultatul acestui exemplu este prezentat în Fig. 4.

Orez. 4. Utilizarea colțurilor eliptice

De asemenea, puteți modifica aspectul colțurilor imaginilor adăugând proprietatea border-radius la selectorul img, așa cum se arată în Exemplul 5.

Exemplul 5: Imagini

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Abonați-vă

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

Trece cu mouse-ul peste

Efecte CSS3

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.

/*Colțuri rotunjite*/ -webkit-border-radius: 10px;

-moz-border-radius: 15px;

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

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

Animație CSS

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

Efecte CSS3

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

-moz-border-radius: 15px;

box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

Animația nu este practic diferită de exemplul precedent.

/*Gradient*/ imagine de fundal: -webkit-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

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.

Animație CSS

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: text-align: 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;

/*Gradient*/ imagine de fundal: -webkit-linear-gradient(sus, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

-moz-border-radius: 5px;

chenar-rază: 5px;

Am adăugat aici o schiță a modului în care văd butonul Demo. Ideea aici este următoarea, pentru a face butonul ca din două părți, ar trebui să fie animat, când treceți cu mouse-ul, a doua parte se va deschide, trăgând blocul interior în care se află inscripția, iar când cursorul este îndepărtat, totul ar trebui să revină la poziția inițială.

• În această lecție vom folosi stiluri de bază precum:
• pseudo-elemente :inainte, :dupa;
• folosind pozitia cu pozitionam blocurile
• Folosind pseudo-clasele :hover , :activ vom defini stiluri pentru hover și click mouse
• și faceți o animație lină folosind tranziție, transformare

Structura butoanelor HTML

Având o schiță în fața ochilor, vă puteți imagina deja cum să implementați aceasta în CSS. Vom avea nevoie de un bloc principal în care vor fi amplasate toate elementele butonului, acesta va fi învelișul acestuia. Apoi butonul va avea o parte internă care se va deplasa când mouse-ul nu se mișcă în interior vom plasa textul „Vezi exemplu”. Apoi există părțile din stânga și din dreapta ale butonului, între ele vom plasa pseudo-elemente de formă triunghiulară. Și aproape am uitat, poza este sub formă de săgeți. Va trebui să animem toate acestea și să dăm butonului o anumită textură.

Să deschidem mediul nostru de dezvoltare, în cazul meu pe care îl folosesc PHPStorm, voi crea index.html în el, scrie numele „ Butonul DEMO animație CSS" Noi creăm

, în el plasăm un bloc div, cu class.dws-button, (acesta va fi wrapper-ul nostru pentru buton). În wrapper vom plasa un link în care vom plasa trei blocuri, un div cu clasa .b-demo (aceasta este partea din stânga a butonului), urmat de un div cu clasa .b-text (aceasta este blocul interior care merge cu inscripția) și blocul div final cu clasa .b-img, după cum ați ghicit, este partea dreaptă și vom plasa imaginea în el.

Div.dws-button>a>div.b-demo+div.b-text+div.b-img

Faceți clic pe aplicați și se formează structura.

În link vom pune un semn hash (#) pentru ca acesta să fie activ. Să introducem numele butonului " Demo" , în blocul din mijloc indicăm textul " Vezi exemplu", iar în partea de jos inserăm calea către imagine.

Creăm un director în care voi copia imaginile, puteți să vă lipiți pozele sau să descărcați arhiva cu codul gata făcut.

Specificăm calea către imagine src="img/icon.png" , specificăm alt="button" , на этом у нас каркас готов самой кнопки и можно переходить к оформлению стилей.!}

Descrieți stilurile CSS ale butonului

Următorul pas este crearea CSS style.css și conectați-l la pagina de index. Conectăm imediat fontul popular Cuprum și nu vom mai avea nevoie de fișierul index.

Accesați style.css, adăugați o imagine pe fundal și resetați umplutura pentru toate elementele din blocul .dws-button.

Body( imagine de fundal: url("img/ep_naturalwhite.png"); ) .dws-button *( marja: 0; umplutură: 0; )

Setăm stilul textului pentru butonul în sine și setăm lățimea acestuia la 250 de pixeli. și o înălțime de 70 de pixeli, centrați-l în mijlocul ecranului și faceți indentări din partea de sus de 250 de pixeli. Apoi îi vom da o chenar cu 1 vârf. astfel încât să putem vedea marginile butonului în timpul animației sale când se întinde.

Buton Dws (familie de fonturi: Cuprum, Arial, Verdana, sans-serif; lățime: 250px; înălțime: 70px; margine: 250px automat; contur: 1px solid #faa21a; )

Eliminați sublinierea de pe link-uri și atribuiți-le o culoare gri.

Butonul Dws a( text-decor: niciunul; culoare: #2e2e30; )

Apoi vom selecta imediat blocurile și le vom oferi o singură culoare albă.

B-demo, .b-img( fundal: #ffffff; )

În continuare, vom descrie fiecare bloc separat, vom selecta clasa .b-demo și vom seta lățimea blocului la 105 pixeli. Setați înălțimea folosind line-height: 70px;

, centrați textul și măriți fontul la 30 de pixeli. Faceți-l complet cu majuscule și setați umplutura la liniuțele din stânga și din dreapta.

B-demo( lățime: 105px; înălțime linie: 70px; aliniere text: centru; dimensiune font: 30px; transformare text: majuscule; umplutură: 0 10px 0 15px; )

Selectați următorul bloc .b-text, atribuiți-i o culoare închisă, faceți textul deschis, setați-i dimensiunea la 24 de pixeli și setați-i lățimea la 150 de pixeli. iar folosind indentări vom reduce înălțimea blocului. Centrați textul și setați umplutura.

B-text( fundal: #3e3f3e; culoare: #ffffff; dimensiune font: 24px; lățime: 150px; înălțime linie: 20px; aliniere text: centru; umplutură: 10px 0 10px 10px; )

Selectați blocul potrivit și setați lățimea la 45 pic. înălțimea este tot de 45 de vârfuri. .padding va centra elementul de imagine deplasându-l ușor spre dreapta.

B-img( lățime: 45px; înălțimea liniei: 45px; umplutură: 20px 0 0 20px; )

Apoi poziționăm aceste elemente în raport cu blocul cu clasa .dws-button. Pentru a face acest lucru, atribuiți poziția clasei: relativ;și toate blocurile imbricate au poziție: absolută; .

.dws-button( font-family: Cuprum, Arial, Verdana, sans-serif; lățime: 250px; înălțime: 70px; margine: 250px automat; contur: 1px solid #faa21a;

poziție: relativă; ) .b-demo, .b-text, .b-img( poziție: absolut; )

Blocurile sunt toate ajustate la părinte, iar acum să le parcurgem și să le centrem. Pentru clasa .b-demo vom indica pozițiile de pornire prin zerouri din stânga și de sus și vom adăuga z-index:10;

Blocul cu textul va fi indentat din stânga și de sus cu 5 pică.

.b-text( fundal: #3e3f3e; culoare: #ffffff; dimensiune font: 24px; lățime: 150px; înălțime linie: 20px; aliniere text: centru; umplutură: 10px 0 10px 10px; stânga: 5px;

sus: 5px; )

Și blocul cu imaginea .b-img este indentat în partea stângă cu 140 de pixeli. , și setați partea de sus la 0. Rotunjiți imediat colțurile din partea dreaptă la 10 vârfuri..b-img( lățime: 45px; înălțimea liniei: 45px; umplutură: 20px 0 0 20px;

stânga: 140px;

sus: 0; chenar-rază: 0 10px 10px 0; )

Și vom face același lucru cu blocul din stânga.

.b-demo( lățime: 105px; înălțime linie: 70px; aliniere text: centru; dimensiune font: 30px; transformare text: majuscule; umplutură: 0 10px 0 15px; stânga: 0; sus: 0; z- indice: 10;

chenar-rază: 10px 0 0 10px; )

Apoi trebuie să facem două pseudo-elemente, acestea sunt chiar colțurile care sunt situate la legătura lor.

Selectați blocul din dreapta și atribuiți-i pseudo-elementul :before, setați lățimea și înălțimea la zero și folosiți chenar pentru a desena un triunghi. Apoi trebuie să-l poziționăm, pentru a face acest lucru îl adăugăm la setul nostru.

.b-demo, .b-text, .b-img, .b-demo:before( poziție: absolut; )

Și o aliniem astfel încât să stea la capătul blocului.

B-demo:before( conținut: ""; lățime: 0; înălțime: 0; chenar-sus: 35px solid transparent; chenar-stânga: 10px solid #ffffff; chenar-jos: 35px continuu transparent; sus: 0; stânga: 129 pixeli) Vă rugăm să rețineți că aliniem toate blocurile la stânga, nu la dreapta, deoarece animația va rula de la stânga la dreapta și acesta este punctul cheie.

Apoi selectăm următorul bloc cu imaginea și îi atribuim pseudo-elementul :after. Notăm conținutul, apoi setăm lățimea și înălțimea la zero și folosim chenar pentru a desena un triunghi. O poziționăm absolut și o aliniem la stânga.

.b-demo, .b-text, .b-img, .b-demo:before,

.b-img:after( poziție: absolut; ) .b-img:after( conținut: ""; lățime: 0; înălțime: 0; chenar-sus: 35px solid transparent; chenar-stânga: 10px solid #3e3f3e; chenar -jos: 35px transparent sus: 0;

Avem gata cadrul butonului principal, tot ce rămâne este să îl animam și să-i dăm un design frumos.

Să atribuim o animație de mișcare lină tuturor blocurilor simultan, să le selectăm pe toate și să setăm tranziția pentru toate proprietățile la 0,5 secunde.

Butonul Dws a:hover .b-demo, .dws-button a:hover .b-demo:before, .dws-button a:hover .b-text, .dws-button a:hover .b-img, . dws-button a:hover .b-img:after(tranziție:toate 0,5s; )

Atribuim o mișcare cu acest bloc pseudo-elementului :before la 69 de pixeli. La stânga.

Butonul Dws a:hover .b-demo:before( stânga: 69px; )

Mutăm a doua parte a butonului în partea dreaptă, indicând că atunci când trecem cu mouse-ul, mutam blocul cu 185 de pixeli.

Butonul Dws a:hover .b-img( stânga: 185px; )

Apoi blocul cu text va fi la 50 pic. împingeți, selectați și înregistrați mișcarea blocului.

Butonul Dws a:hover .b-text( stânga: 50px; )

Pentru ca butonul să nu se prăbușească imediat după ce scoatem cursorul, trebuie să setăm o tranziție pentru elementele blocului în repaus și să facem ca butonul să se micșoreze cu o rată mai mică de 1,5 secunde.

.b-demo, .b-text, .b-img, .b-demo:before, .b-img:after( poziție: absolut; tranziție: toate cele 1,5 secunde; )

Apoi animem efectul de rotație a pictogramei folosind transform 360 de grade, selectăm imaginea și scriem transform: rotate(360deg) ; și, de asemenea, specificați opacitatea: 0,5;

pentru a face imaginea puțin mai transparentă.

Buton Dws a:hover img( transformare: rotire(360deg); opacitate: 0,5; )

Dacă indicăm acum butonul, nu vom vedea efectul de rotație, deoarece trebuie să atribuim o tranziție imaginii în sine. Selectăm și îi atribuim această proprietate.

B-img img( tranziție: toate cele 1,5 secunde; )

Butonul cu efectul de alunecare animat este gata, puteți ascunde conturul, nu va mai fi necesar și începeți să îl proiectați.

Buton Dws (familie de fonturi: Cuprum, Arial, Verdana, sans-serif; lățime: 250px; înălțime: 70px; margine: 250px automat; /*contur: 1px solid #faa21a;*/ poziție: relativă; )

Am creat un buton animat cu drepturi depline și acum îi putem oferi un aspect mai frumos.

Stilul butoanelor în CSS

După ce am făcut toate lucrările asupra proprietăților, poziționării și animației sale, vom trece la proiectarea acestuia. Să schimbăm stilul general al butonului, să adăugăm un fundal la blocuri, să facem o umbră pentru text și să adăugăm o pseudo-clasă :active care se va declanșa atunci când este apăsat mouse-ul.

B-demo, .b-img( /* Permalink - folosit pentru a edita și partaja acest gradient: http://colorzilla.com/gradient-editor/#f22404+13.8e0b00+65.6d0019+100 */ fundal: # f22404; /* Browsere vechi */ fundal: -moz-linear-gradient(-45deg, #f22404 13%, #8e0b00 65%, #6d0019 100%) /* FF3.6-15 */ fundal: -webkit- linear-; gradient(-45deg, #f22404 13%,#8e0b00 65%,#6d0019 100%) /* Chrome10-25,Safari5.1-6 */ fundal: liniar-gradient (135deg, #f22404 13%,# 8e00); %,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",1dientType", ); /* IE6-9 fallback pe gradient orizontal */ )

Pentru pseudo-element, atribuim o culoare roșie fundalului ingredientului butonului.

.b-demo:before( conținut: ""; lățime: 0; înălțime: 0; chenar-sus: 35px solid transparent; chenar-stânga: 10px solid#7B040E; chenar-jos: 35px solid transparent;

sus: 0;

stânga: 129px; )

Să schimbăm culoarea legăturilor de la închis la alb. Butonul Dws a( text-decor: niciunul; culoare: #ffffff; )

Să dăm textului o umbră, pentru asta îl vom adăuga în clasă.b-demo text-shadow: -1px -1px 1px #000000;

.b-demo( lățime: 105px; înălțime linie: 70px; aliniere text: centru; dimensiune font: 30px; transformare text: majuscule; umplutură: 0 10px 0 15px; stânga: 0; sus: 0; z- index: 10; chenar-rază: 10px 0 0 10px;

text-shadow: -1px -1px 1px #000000; ) Voi face unitatea interioară într-o culoare albăstruie.

.b-text( /* Permalink - folosit pentru a edita și partaja acest gradient: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50;Custom+2 */ fundal: #b3dced; /* Browsere vechi */ fundal: -moz-linear-gradient(45deg, #b3dced 0%, #29b8e5 50%) /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #b3dced 0%); ,#29b8e5 50%) /* Chrome10-25, Safari5.1-6 */ fundal: liniar-gradient(45deg, #b3dced 0%,#29b8e5 50%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+; , Safari7+ */ filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1);

culoare: #ffffff; dimensiunea fontului: 24px; latime: 150px;

Să înlocuim poza, să o înlocuim pe cea neagră cu una albă, la începutul lecției am încărcat două dintre ele, adăugați o a doua pictogramă.

Și în etapa finală, vom descrie stilurile când faceți clic pe mouse

Voi scrie aici comentariul corespunzător, apoi sub el vom selecta două blocuri cu pseudo-clasa :active și setăm ca ingredientul să fie doar inversat.

/* Animație:activ */ .dws-button a:active .b-demo, .dws-button a:active .b-img( /* Permalink - utilizați pentru a edita și partaja acest gradient: http://colorzilla.com /gradient-editor/#f22404+13.8e0b00+49.6d0019+70 */ background: #f22404 /* Browsere vechi */ background: -moz-linear-gradient(45deg, #f22404 13%, #8e0b00 49%; 6d0019 70%) /* FF3.6-15 */ fundal: -webkit-linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%) .1-6 */ fundal: liniar -gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform ="(Microsoft.Cogradient . f22404", endColorstr="#6d0019",GradientType=1); /* IE6-9 alternativă pe gradient orizontal */ )

Pentru blocul din fundal, vom face un gradient în acest stil, doar în oglindă, și vom adăuga un efect de umbră.

Dws-button a:active .b-text( /* Permalink - folosit pentru a edita și partaja acest gradient: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50 */ fundal: #b3dced; /* Browsere vechi */ fundal: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%) /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg,; #b3dced 0%,#29b8e5 50%) /* Chrome10-25, Safari5.1-6 */ fundal: liniar-gradient (135deg, #b3dced 0%, #29b8e5 50%); , Chrome26+, Opera12+, Safari7+ */ filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1 /* IE6-9 fallback pe gradient orizontal */ box-); umbră: 0 0 3px 1px #82DCFF )

Ca stil final, atunci când facem clic, vom specifica rotirea pictogramei în direcția opusă cu aspectul său complet.

Butonul Dws a:activ img( transformare: rotire(0deg); opacitate: 1; )

Rezultatul este un buton destul de impresionant, care poate fi ușor modificat și proiectat pentru a se potrivi nevoilor dumneavoastră. Vă recomand să schimbați designul general, să vă faceți propriile presetări, să experimentați cu diferite opțiuni de gradient, poate veți veni cu metode de animație mai originale și asigurați-vă că le veți împărtăși în comentarii.

Oricine i-a plăcut materialul, asigurați-vă că îl distribuiți prietenilor dvs.