Vom arunca o privire la fiecare exemplu și vom vedea cum arată structura și stilurile lor HTML pentru diferite stări ale butoanelor.
Vă rugăm să rețineți că animațiile/tranzițiile vor funcționa numai în browserele care acceptă aceste proprietăți CSS3.
Pentru a nu arunca codul în lecție, nu voi folosi prefixe pentru diverse browsere. Le puteți vedea în arhivă cu exemple.
Exemplul 1
În acest exemplu, vom crea un buton mare cu mai multe elemente pe el. Va avea o pictogramă, textul corpului, o săgeată în partea dreaptă și un preț care va apărea doar când trecem cu mouse-ul peste.
Marcaj HTML
Structura este destul de simplă: pictograma imagine și alte elemente din etichetele span:
Disponibil pe Apple Magazin de aplicații
css
În stiluri, ne asigurăm că tranzițiile sunt setate corect pentru elementul pe care vrem să-l animem pe hover. Prețul va fi invizibil, setați-i opacitatea la 0. Aplicarea multor casete-umbră ne va permite să creăm efecte realiste:.a-btn( fundal: liniar-gradient(sus, #a9db80 0%,#96c56f 100%); padding-stânga: 90px; padding-right: 105px; înălțime: 90px; afișare: inline-block; poziție: relativă; chenar: 1px solid #80ab5d; umbră casetă: 0px 1px 1px rgba(255,255,255,0.8) intercalat, 1px 1px 3px rgba(0,0,0,0.2); chenar-rază: 4px; float: stânga; clar: ambele; margine: 10px 0px; overflow: ascuns; tranziție: box-shadow 0,3s ease-in-out; ) .a-btn img( poziție: absolut; stânga: 15px; sus: 13px; chenar: niciunul; tranziție: toate 0,3s ease-in-out; ) .a-btn .a-btn-slide-text( poziție: absolut; dimensiunea fontului: 36px; sus: 18px; stânga: 18px; culoare: #6d954e; opacitate: 0; text-shadow : 0px 1px 1px rgba(255,255,255,0.4); tranziție: opacitate 0,2s ease-in-out; ) .a-btn-text( padding-top: 13px; display: block; font-size: 30px; text-shadow: 0px -1px 1px #80ab5d; ) .a-btn-text small( display: block; font-size: 11px; letter-spacing: 1px; ) .a-btn-icon-right( poziție: absolut; dreapta: 0px; sus: 0px; înălțime: 100%; latime: 80px chenar-stânga: 1px solid #80ab5d; casetă-umbră: 1px 0px 1px rgba(255,255,255,0.4) inset; ) .a-btn-icon-right span( lățime: 38px; înălțime: 38px; opacitate: 0,7; chenar-rază: 20px; poziție: absolut; stânga: 50%; sus: 50%; margine: -20px 0px 0px - 20px; chenar: 1px rgba solid(0,0,0,0.5); fundal: #4e5c50 url(../images/arrow_down.png) centru centru fără repetare; umbră casetă: 0px 1px 1px rgba(255.255.255,0.3 ) inserție, 0px 1px 2px rgba(255,255,255,0,5); tranziție: toate 0,3s ease-in-out; )
Când treceți cu mouse-ul peste buton, vom schimba umbra, precum și vom arăta prețul și vom ascunde imaginea:
.a-btn:hover( box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); ) .a-btn:hover img( transform: scale(10) ); opacitate: 0; ) .a-btn:hover .a-btn-slide-text, .a-btn:hover .a-btn-icon-right span (opacitate: 1; )
În starea activă, vom face butonul apăsat adăugând o umbră. Pictograma săgeată din dreapta va fi mărită:
.a-btn:activ (position:relative; top:1px; background:#80ab5d; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; chenar-culoare: #a9db80; ) .a- btn:activ .a-btn-icon-right span( transform: scale(1.4); )
Exemplul 2
Al doilea exemplu va fi foarte asemănător cu primul, doar că vom adăuga câteva efecte noi.
Marcaj HTML
Marcajul din acest exemplu va fi același ca în primul exemplu.css
Stilurile sunt aproape aceleași ca în primul exemplu, doar adaptăm culorile. Dar vom face un efect de hover diferit. Prețul va crește la dimensiunea inițială și pictograma va dispărea. Pentru săgeată, schimbați culoarea de fundal în roșu:.a-btn:hover(box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); ) .a-btn:hover img( opacitate: 0; ) .a-btn:hover .a-btn-slide-text( opacitate: 1; transformare: scară(1); ) .a-btn:hover .a-btn-icon-right span( opacitate: 1; culoarea fundalului : #bc3532; )
Starea activă va fi aceeași ca în exemplul anterior. Vom schimba doar culorile. Când facem clic pe butonul, vom roti și săgeata:
.a-btn:activ (poziție: relativ; sus: 1px; fundal: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset; chenar-culoare: #80a9da; ) .a- btn:activ .a-btn-icon-right span( transformare: rotire(360deg); )
Exemplul 3
În acest exemplu, vom încerca să facem ceva complet diferit. Butonul se va extinde în jos la trecerea cursorului și va dezvălui un alt mesaj. Pictograma săgeată se va roti ușor.
Marcaj HTML
Marcajul din exemplul 3 va fi ușor diferit de cel din exemplele anterioare. Textul care va aluneca în jos va fi într-o etichetă span cu clasa „a-btn-slide-text”:Înregistrează-te acum
css
În stare normală, butonul va avea o anumită înălțime, îl vom anima pe hover pentru a afișa mesaje suplimentare. Mesajul suplimentar „a-btn-slide-text” va fi poziționat absolut și îi vom crește înălțimea de la 0px la 30px la hover..a-btn( fundal: gradient liniar(sus, #feda71 0%,#febb4a 100%); chenar: 1px solid #f5b74e; culoarea chenarului: #f5b74e #e5a73e #d6982f; umbră casetă: 0 1px 1px # d3d3d3, inserare 0 1px 0 #fee395; umplutură: 0px 80px 0px 10px; înălțime: 38px; afișare: bloc inline; poziție: relativă; raza chenar: 4px; float: stânga; margine: 10px; depășire: ascuns; tranziție: toate 0.3s liniare; ) .a-btn-text( padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; culoare: #996633; text-shadow: 0 1px 0 #fedd9b; tranziție: toate 0,3 s liniar; ) ; dimensiunea fontului: 13px; spațiu alb: nowrap; familia de fonturi: Georgia, serif; stilul fontului: cursiv; text-indent: 15px; overflow: ascuns; înălțimea liniei: 30px ; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;tranziție: înălțime 0,3s liniar; ; dreapta: 0px; sus: 0px; inaltime: 100%; latime: 52px; chenar-stânga: 1px solid #f5b74e; casetă-umbră: 1px 0px 1px rgba(255,255,255,0.4) inset; ) .a-btn-icon-right span( lățime: 38px; înălțime: 38px; opacitate: 0,7; poziție: absolut; stânga: 50%; sus: 50%; margine: -20px 0px 0px -20px; fundal: URL transparent (../images/arrow_right.png) fără repetare 50% 55%; tranziție: toate 0,3s liniare; )
La trecerea cursorului, vom modifica înălțimea butonului și textul suplimentar. De asemenea, vom roti pictograma săgeată cu 45 de grade:
.a-btn:hover( înălțime: 65px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) insert, 1px 1px 5px rgba(0,0,0,0.4); ) .a-btn:hover .a- btn-text( text-shadow: 0px 1px 1px rgba(0,0,0,0.2); culoare: #fff; ) .a-btn:hover .a-btn-slide-text( înălțime: 30px; ) .a -btn:hover .a-btn-icon-right span( opacitate: 1; transformare: rotire(-45deg); )
Când este activ, butonul se va mișca ușor și își va schimba culoarea, astfel încât butonul va părea apăsat:
.a-btn:activ (position:relative; top:1px; background: linear-gradient(sus, #fec354 0%,#fecd61 100%); /* W3C */ border-color: #d29a3a #cc9436 #c89133; text-shadow: 0 1px 0 #fee1a0; box-shadow: 0 1px 1px #d4d4d4, insert 0 1px 0 #fed17e; )
Exemplul 4
În exemplul 4, vom împinge un mesaj suplimentar, ca în exemplul anterior, dar o vom face acum în partea dreaptă. Va arăta ca și cum butonul deschide un mesaj în interiorul său.
Marcaj HTML
Markupul din acest exemplu este același ca în cel precedent.css
Stilurile butoanelor vor fi similare cu exemplul anterior. Vom schimba doar culoarea și poziția textului suplimentar:.a-btn( fundal: liniar-gradient(sus, #80a9da 0%,#6f97c5 100%); padding-stânga: 20px; padding-right: 80px; înălțime: 38px; afișare: inline-block; poziție: relativă; chenar: 1px solid #5d81ab; umbră casetă: 0px 1px 1px rgba(255,255,255,0.8) încadrat, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(185,255,0.8); : 20px; float: stânga; clar: ambele; margine: 10px 0px; overflow: ascuns; tranziție: toate 0,3s liniar; ) .a-btn-text( padding-top: 5px; display: block; font-size: 18px ; spatiu alb: nowrap; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); culoare: #446388; tranziție: toate 0.2s liniare; ) .a-btn-slide-text (poziție: absolut; înălțime: 100 %; sus: 0px; dreapta: 52px; lățime: 0px; fundal: #63707e; text-shadow: 0px -1px 1px #363f49; culoare: #fff; font-size: 18px; spațiu alb: nowrap; text-transform : majuscule; text-align: stânga; text-indent: 10px; overflow: ascuns; line-height: 38px; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inserție; tranziție: lățime 0,3s liniară; ) .a-btn-icon-right( poziție: absolut; dreapta: 0px; sus: 0px; înălțime: 100%; lățime: 52px; chenar-stânga: 1px solid #5d81ab; box-shadow: 1px 0px 1px rgba(255.255.255) ,0,4) insert; ) .a-btn-icon-right span( lățime: 38px; înălțime: 38px; opacitate: 0,7; poziție: absolut; stânga: 50%; sus: 50%; margine: -20px 0px 0px -20px ; fundal: URL transparent(../images/arrow_right.png) fără repetare 50% 55%; tranziție: toate 0,3 s liniare; )
La trecerea cursorului, vom crește umplutura butonului din dreapta, precum și lățimea etichetei span cu clasa „a-btn-slide-text”:
.a-btn:hover( padding-right: 180px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); ) .a-btn:hover. a-btn-text( text-shadow: 0px 1px 1px #5d81ab; culoare: #fff; ) .a-btn:hover .a-btn-slide-text( lățime: 100px; ) .a-btn:hover .a -btn-icon-right span( opacitate: 1; )
În starea activă, creați un efect de clic folosind o umbră:
.a-btn:activ (poziție: relativ; sus: 1px; fundal: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset; chenar-culoare: #80a9da; )
Exemplul 5
În acest exemplu, vom folosi un font de caractere pentru pictograme. Ideea este de a crea următorul efect: când treci cu mouse-ul, pictograma dispare și apare o săgeată în mișcare.
Marcaj HTML
Structura va consta din 4 etichete span în interiorul link-ului. Spațiul cu clasa „a-btn-slide-icon” va anima săgeata, se va deplasa de sus în jos.Z Descarcă acum
css
Deoarece vom folosi un font pentru a afișa pictograma din partea stângă, va trebui să includem acest font.Vom ascunde săgeata setându-i valoarea maximă la -30px.
@font-face ( familia de fonturi: „WebSymbolsRegular”; src: url(„websymbols/websymbols-regular-webfont.eot”); src: url(„websymbols/websymbols-regular-webfont.eot?#iefix”) format ("embedded-opentype"), url("websymbols/websymbols-regular-webfont.woff") format("woff"), url("websymbols/websymbols-regular-webfont.ttf") format ("truetype"), url("websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular") format("svg"); font-weight: normal; font-style: normal; ) .a-btn( chenar-raza: 50px; umplutură: 10px 30px 10px 70px; poziție: relativă; float:stânga; afișare: bloc; overflow: ascuns; margine: 10px; fundal: liniar-gradient(sus, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%); box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); tranziție: box-shadow 0,3s out; ) .a-btn-symbol( font-family: "WebSymbolsRegular", cursiv; culoare: #555; font-size: 20px; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); position:absolute; stânga: 20px; înălțimea liniei: 32px; tranziție: opacitate 0,3s ease-in-out; ) .a-btn-text( dimensiunea fontului: 20px; culoare: #d7565b; înălțimea liniei: 16px; greutatea fontului: bold; familia de fonturi: „Myriad Pro”, „Trebuchet MS”, sans-serif; text -shadow: 1px 1px 2px rgba(255,255,255,0.5); display: block; ) .a-btn-slide-text( font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 1px; text -transform: majuscule;culoare: #555;text-shadow: 0px 1px 1px rgba(255,255,255,0.9); ) .a-btn-slide-icon( poziție: absolut; sus:-30px; lățime: 22px; înălțime: 22px ; fundal: URL transparent(../images/arrow_down_black.png) fără repetare stânga sus; stânga: 20px; opacitate: 0,4; )
La trecerea cursorului, vom ascunde pictograma din stânga și vom reda animația pentru săgeată la nesfârșit:
.a-btn:hover( fundal: #fff; box-shadow: 0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); ) .a-btn:hover .a -btn-simbol( opacitate: 0; ) .a-btn:hover .a-btn-slide-icon( -webkit-animation: slideDown 0,9s liniar infinit; )
Când se face clic pe butonul, îl vom face roșu și vom crea un efect de clic adăugând o umbră:
.a-btn:active( fundal: #d7565b; box-shadow: 0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); ) .a-btn:active . a-btn-text( culoare: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); ) .a-btn:activ .a-btn-slide-text( culoare: rgba(0 ,0,0,0.4); text-shadow: niciunul; )
Și, în sfârșit, o animație simplă pentru a muta săgeata de sus în jos:
@keyframes slideDown ( 0% ( sus: -30px; ) 100% (sus: 80px;) )
Exemplul 6
În acest exemplu, vom crea un buton rotund cu un asterisc în el. Vom face steaua să se rotească la hover (cu puțin elan) și vom face să apară un text suplimentar.
Marcaj HTML
Vom avea trei etichete span în butonul nostru de link. Acesta din urmă va avea text ascuns care este afișat la trecerea cursorului.Înscrie-te, e gratis!
css
Ne vom juca puțin cu nth-child în acest exemplu. Deoarece avem 3 etichete span, ne vom referi la ele astfel: .a-btn span:nth-child(1), .a-btn span:nth-child(2) și .a-btn span:nth-child (3).Vom face butoanele rotunde și le vom adăuga umbre fanteziste. Pentru a centra textul corpului pe verticală, vom seta afișarea la celulă-tabel. Stelele și textul ascuns vor fi poziționate absolut.
.a-btn( lățime: 120px; înălțime: 120px; chenar-rază: 50%; afișare: bloc; margine: 20px; float: stânga; fundal: #f0ad4e; poziție: relativ; box-shadow: 0px 0px 5px 0px rgba (246, 212, 163, 0,5) inserție, 0px -1px 5px 4px rgba(170, 77, 27, 0,2) 0px 0px 0px 9px #fff; tranziție: toate 0,3s liniar; ) .a-btn span( display: table -celulă; lățime: 80px; înălțime: 80px; umplutură: 20px; text-align: center; vertical-align: middle ; font-size: 26px; culoare: #fff; text-shadow: 0px 1px 1px #A03F16; font- familie: „Arvo”, „Myriad Pro”, „Trebuchet MS”, sans-serif; tranziție: toate 0,3s liniare ; ) .a-btn span:nth-child(1), .a-btn span:nth-child (3)( poziție: absolut; sus: 0px; stânga: 0px; dimensiunea fontului: 40px; înălțimea liniei: 36px; opacitate: 0; ) .a-btn span:nth-child(1)( fundal: URL transparent (../images/star.png) centru centru fără repetare; opacitate: 0,2; )
La trecerea cursorului, vom schimba umbra butonului astfel încât acesta să apară ridicat. Textul ascuns va fi dezvăluit și vom anima textul inițial. Vom aplica și o animație de rotație pentru stea:
.a-btn:hover( fundal: rgba(170, 77, 27, 0.6); box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(1770), , 27, 0,2) încadrat, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0,6), 0px 0px 0px 9px #fff; ) .a-btn:hover-childspan:3nth )( opacitate: 1; ) .a-btn:hover span:nth-child(2)( transform: scale(0); opacitate: 0; ) .a-btn:hover span:nth-child(1)( animație : rotiți 1s liniar; )
Acum să facem ca butonul să pară apăsat atunci când faceți clic pe el:
.a-btn:active( box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 7px #fff0 , 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; ) .a-btn:activ span:nth-child(2)( culoare: rgba(170, 77, 27, 0.8); text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); )
Animația de rotație/ ondulație arată astfel:
@-webkit-keyframes se rotesc( 0% ( transforma: scară(1) rotește(0);) 50% (transforma: scară(0,5) rotește(180deg);) 100% (transforma: scară(1) rotește(360deg) ;) )
Exemplul 7
În ultimul exemplu, vom crea un pseudo buton 3D folosind niște umbre grozave.
Marcaj HTML
Structura va fi aceeași ca în al cincilea exemplucss
Stilul va fi, de asemenea, foarte asemănător cu exemplul 5, vom schimba doar câteva culori și umbre:.a-btn( chenar-rază: 10px; umplutură: 10px 30px 10px 70px; poziție: relativă; float:left; afișare: bloc; overflow: ascuns; margine: 10px; fundal: liniar-gradient(sus, #b7f2f4 0% ,#7ce7ea 100%); chenar: 1px solid #90c6c8; chenar-culoare: #90c6c8 #78bdc0 #65b6ba; umbră casetă: 0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5d5, 052, 52, 52 px 0.8) insert; tranziție: toate 0.2s liniară; ) .a-btn-symbol( font-family: "WebSymbolsRegular", cursiv; culoare: #437b7d; text-shadow: 0 1px 0 #bef3f5; font-size: 20px; poziție: absolut; stânga: 20 px; lățime: 20 px; aliniere text: centru; înălțime linie: 32 px; tranziție: toate 0,3 s ease-in-out; ) .a-btn-text( dimensiunea fontului: 20px; culoare : #437b7d; text-shadow: 0 1px 0 #bef3f5; line-height: 16px; font-weight: bold; font-family: „Myriad Pro”, „Trebuchet MS”, sans-serif; afișare: bloc; ) . a-btn-slide-text( font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: majuscule; culoare: #555; text-shadow: 0px 1px 1px rgba(255,255,255,0.9); )
La trecerea cursorului, vom mări butonul și vom roti pictograma mică: butoane Adaugă etichete
O zi bună, dragi cititori. În această zi vom crea un set de pictograme frumoase pentru site folosind CSS3 și animație. Datorită acestui buton, puteți transforma orice link de pe pagină într-un buton animat cu o simplă atribuire a unui nume de clasă. În general, nu este nimic complicat aici ca la prima vedere.
Pentru a vă reaminti, aceste butoane sunt gratuite și puteți descărcare gratuită. Merge.
Butoane CSS3 animate pentru site-ul dvs
Acum câteva cuvinte despre dimensiunea și colțurile rotunjite ale butoanelor:
/* Trei dimensiuni de buton */ .button.big (dimensiunea fontului:30px;) .button.medium (dimensiunea fontului:18px;) .button.small (dimensiunea fontului:13px;) /* Colțurile butoanelor rotunjite */ .button.rounded( -moz-border-radius:4em; -webkit-border-radius:4em; chenar-radius:4em; )
În codul de mai sus, există trei clase - acestea sunt mare, mediuși mic. În consecință, setăm valori diferite în pixeli pentru fiecare clasă. Totul este clar vizibil în codul de mai sus.
Și acum partea cea mai interesantă sunt culorile. Nici aici, în principiu, nu este nimic complicat.
/* Buton albastru */ .blue.button( color:#0f4b6d !important; border:1px solid #84acc3 !important; /* Culoare de fundal de rezervă */ background-color: #48b5f2; background-image: url("button_bg. png"), url("button_bg.png"), -moz-radial-gradient(centru jos, cerc, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(# 4fbbf7, #3faeeb); imagine de fundal: url("button_bg.png"), url("button_bg.png"), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, de la (rgba(89,208,244,1)), la(rgba(89,208,244,0))), -webkit-gradient(liniar, 0% 0%, 0% 100%, de la (#4fbbf7), la (#3faeeb)); ) .blue.button:hover( background-color:#63c7fe; background-image: url("button_bg.png"), url("button_bg.png"), -moz-radial-gradient (centru jos, cerc, rgba -moz-linear-gradient(#63c7fe, #58bef7); imagine de fundal: url("button_bg.png"), url("button_bg.png" ), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, de la(rgba(109,217,250,1)), la(rgba(109,21) 7,250,0))), -webkit-gradient(liniar, 0% 0%, 0% 100%, de la (#63c7fe), la (#58bef7)); )
Asta este tot pentru acum. Vreau să vă avertizez din timp că, în prezent, butoanele pot să nu funcționeze în unele browsere, deoarece, până acum, nu toate acceptă CSS3. Dar mi se pare că această problemă se va rezolva în curând.
Salutare dragi prieteni. Astăzi vă voi spune despre două moduri care vă vor ajuta să creați un buton animat pentru site-urile dvs. Probabil ați văzut multe dintre aceste butoane și ați făcut clic pe ele. Așa că, pe blogul meu, recomand periodic cursuri și training-uri pentru parteneri, 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 linkurile obișnuite.
Principiul creării butoanelor animate în 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 poziții, în timp ce altele au doar două. Dar principalul lucru este că ești mulțumit de rezultatul final.
Tutorial video despre a doua modalitate de a crea butoane animate:
Ca exemplu, luați în considerare serviciul CSS3 ButtonGenerator, care are doar două poziții. Dar efectele arată foarte bine. Cine este confuz de lipsa limbii ruse, folosește ultimul generator din listă.
Asadar, hai sa incepem.
Deschideți pagina principală a serviciului. Inițial, veți avea o previzualizare 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 amestecarea fundalului.
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, acestea sunt rotații, decalaje și distorsiuni.
Următoarea secțiune, Tranziție, este responsabilă pentru netezimea animației. Setați aceste setări în funcție de butonul dvs. Acțiunile pot fi aplicate întregului buton sau straturilor individuale.
După ce ați încercat de câteva ori, experimentați cu setările și veți înțelege ce este.
După ce apariția inițială a butonului este configurată, puteți trece la pasul următor. Aceasta este o modificare a butonului 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 de trecere cu mouse-ul
Acum toate modificările în setările pe care le faceți sunt pentru butonul care va fi afișat când treceți cu mouse-ul. Și aceste setări depind individual de fiecare buton. De exemplu, am schimbat setările de rotație, gradient și culoare umbră.
Când butonul este gata, puteți trece la instalarea butonului din articol. Pentru a face acest lucru, în locul potrivit al articolului, instalați codul:
Iată exemplul nostru:
Ei bine, acum știi cât de ușor și suficient de rapid să faci 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ă văd pe paginile blogului meu.
P.S. Și iată un exemplu de buton animat pentru antrenamentul lui Denis Gerasimov „Configurarea traficului rece pentru a promova linkurile afiliate”. Am trecut prin acest training și îl recomand tuturor – acesta este, fără prea multă exagerare, o modalitate reală de a câștiga bani pe programele de afiliere. Ceea ce fac eu practic.
Am aruncat o schiță aici când văd butonul Demo. Ideea aici este următoarea, pentru a face butonul ca din două părți, ar trebui să fie animat, la trecerea cu mouse-ul, a doua parte se va deschide, trăgând blocul interior în care se află inscripția, iar în momentul în care cursorul este eliminat , totul ar trebui să revină la poziția inițială.
- În lecție, vom folosi stilurile principale ca:
- pseudo-elemente :before , :after ;
- folosind poziția cu blocuri de poziție
- pseudo-clasele :hover , :activ definesc stilurile la trecerea cu mouse-ul și clicul mouse-ului
- și faceți o animație lină cu tranziție, transformare
Buton HTML Structura
Cu o schiță în fața ochilor, vă puteți imagina deja cum să implementați acest lucru în CSS. Avem nevoie de blocul principal în care vor fi plasate toate elementele butonului, acesta va fi învelișul acestuia. Apoi butonul va avea o parte interioară care se va deplasa în afara când mouse-ul nu este mișcat, în interior vom plasa textul „View example”. Apoi urmează părțile din stânga și din dreapta ale butonului, între ele plasăm pseudo-elemente de formă triunghiulară. Și aproape am uitat, poza este sub formă de săgeți. Va trebui să animam toate acestea și să dăm butoanelor o anumită textură.
Ne deschidem mediul de dezvoltare, în cazul meu îl folosesc phpstorm, creați index.html în el, scrieți numele " Butonul DEMO animație CSS". Noi creăm
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, puneți un semn hash (# ) pentru ca acesta să fie activ. Să scriem numele butonului " Demo" , în blocul din mijloc indicăm textul " Vezi exemplul", iar în partea de jos introduceți calea către imagine.
Creăm un director în care voi copia pozele, puteți să lipiți pozele dvs. sau să descărcați o arhivă cu cod gata făcut.
Scrieți calea către imagine src="img/icon.png" , specificați alt="(!LANG:button"
, на этом у нас каркас готов самой кнопки и можно переходить к оформлению стилей.!}
Descrierea stilurilor CSS pentru buton
Următorul pas, să creăm css style.css și conectați-l la pagina de index. Conectăm imediat fontul popular Cuprum și nu mai avem nevoie de un fișier index.
Accesați style.css , adăugați o imagine în fundal și resetați umplutura tuturor elementelor din blocul .dws-button.
Corp (imagine de fundal: url("img/ep_naturalwhite.png"); ) .dws-button *( marja: 0; umplutură: 0; )
Setăm stilul textului pentru butonul în sine, setăm lățimea acestuia la 250 de pixeli. și o înălțime de 70 pic., centrată în mijlocul ecranului și indentată din partea de sus cu 250 pic. Apoi îi atribuim o chenar de 1 vârf. astfel încât să putem vedea marginile butonului când este animat când este întins.
Buton Dws (familie de fonturi: Cuprum, Arial, Verdana, sans-serif; lățime: 250px; înălțime: 70px; margine: 250px automat; contur: 1px solid #faa21a; )
Eliminam sublinierea din link-uri si le atribuim o culoare gri.
Butonul Dws a( text-decor: niciunul; culoare: #2e2e30; )
Apoi selectați imediat blocurile și dați-le o singură culoare albă.
B-demo, .b-img( fundal: #ffffff; )
În continuare, descriem fiecare bloc separat, selectăm clasa .b-demo și setăm lățimea blocului la 105 pixeli.Setați înălțimea folosind line-height: 70px; , centrați textul și creșteți fontul la 30 pt.. Faceți-l cu majuscule și umpleți padding-ul 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, dați-i o culoare închisă, faceți textul deschis, setați-i dimensiunea la 24 px și setați-i lățimea la 150 px. iar cu ajutorul indenturilor vom reduce inaltimea blocului. Centrați textul și setați umplutura.
B-text( fundal: #3e3f3e; culoare: #ffffff; dimensiunea fontului: 24px; lățime: 150px; înălțimea liniei: 20px; alinierea textului: centru; umplutură: 10px 0 10px 10px; )
Selectați blocul potrivit, setați lățimea la 45 de vârfuri. înălțimea este de asemenea 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 de clasă: relativă; și imbricate toate pozițiile blocurilor: absolut; .
Blocurile au fost toate ajustate la părinte, iar acum să le trecem și să le centrem.
Pentru clasa .b-demo, precizăm pozițiile inițiale cu zerouri din stânga și de sus și adăugăm z-index:10; astfel încât acest bloc să fie mai înalt decât restul.
.b-demo( width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: majuscule; umplutură: 0 10px 0 15px; stânga: 0; sus: 0; indicele z: 10; )Blocul cu textul va fi indentat din stânga și de sus cu 5 vârfuri.
Și blocul cu imaginea .b-img este indentat în partea stângă cu 140 de vârfuri. , și setați-l de sus la 0. Rotunjiți imediat colțurile din partea dreaptă în 10 pică.
.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( width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: 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 se află pe conexiunea lor.
Selectați blocul din dreapta și dați-i un pseudo-element :before, setați lățimea și înălțimea la zero și desenați un triunghi folosind chenar. Apoi, trebuie să-l poziționăm, pentru aceasta îl adaugă la setul nostru.
Și aliniați-l în așa fel î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 solid transparent; sus: 0; stânga: 129px;)
Vă rugăm să rețineți că aliniem toate blocurile la stânga și nu la dreapta, deoarece animația va merge de la stânga la dreapta și acesta este un punct cheie.
Apoi selectăm următorul bloc cu imaginea și îi atribuim pseudo-elementul :after. Scriem conținutul, apoi setăm lățimea și înălțimea la zero și desenăm un triunghi folosind chenar. Poziționați-l absolut și aliniați-l 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 solid transparent; sus: 0; stânga: 0; )Avem gata cadrul principal al butonului, rămâne să-l animeze și să-i dea un design frumos.
Animație de buton în CSS
Practic, butonul este gata si sa incepem sa il animam, o sa scriu un comentariu, de unde vom scrie stiluri. În primul rând, descriem acțiunile când treceți cursorul peste buton.
/* Animație:hover */ .dws-button a:hover .b-demo( lățime: 50px; padding: 0 10px 0 10px; font-size: 20px; )
Vom scrie imediat animația de mișcare lină la toate blocurile, pentru aceasta le selectăm pe toate și 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; )
Prescriem mișcarea cu acest bloc către pseudo-elementul :before la vârful 69. La stânga.
Butonul Dws a:hover .b-demo:before( stânga: 69px; )
Mutăm a doua parte a butonului în partea dreaptă, indică faptul că atunci când trecem cu mouse-ul, deplasăm blocul cu 185 de vârfuri.
Butonul Dws a:hover .b-img( stânga: 185px; )
Apoi blocul cu text va fi la 50 de pică. împingeți, selectați și prescrieț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 tranziția pentru elementele blocului în repaus, vom face ca butonul să se micșoreze în 1,5 secunde mai lent.
.b-demo, .b-text, .b-img, .b-demo:before, .b-img:after( poziție: absolut; tranziție: toate cele 1,5 secunde; )Apoi animam efectul de rotire a pictogramei folosind transform cu 360 de grade, selectam imaginea si scriem transform: rotate(360deg) ; și, de asemenea, setați opacitatea: 0,5; pentru a face imaginea puțin mai transparentă.
Buton Dws a:hover img( transformare: rotire(360deg); opacitate: 0,5; )
Dacă trecem acum peste buton, nu vom vedea efectul de rotație, deoarece trebuie să setăm tranziția la imaginea în sine. Selectăm și îi prescriem această proprietate.
B-img img( tranziție: toate cele 1,5 secunde; )
Butonul cu efectul de extensie animat este gata, puteți ascunde conturul, nu veți mai avea nevoie de el și începeți să îl decorați.
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ă; )
Am creat un buton animat cu drepturi depline și acum îi puteți da 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.
Mergem la serviciul suplimentar unde am pregătit deja presetări și doar copiez stilul pentru buton, apoi îl înlocuiesc pe cel anterior cu el.
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- gradient-liniar(-45deg, #f22404 13%,#8e0b00 65%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */ fundal: gradient liniar(135deg, #f22404 13%,# 8e0b00 65%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f22404", endGradoColorstr="1#6dGradColorstr="1#6dColorstr="y", =1); /* IE6-9 fallback pe gradient orizontal */ )
Pentru pseudo-element, adăugați o culoare roșie pe fundalul 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 vom adăuga în clasă .b-demo text-shadow: -1px -1px 1px #000000;
.b-demo( width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: 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 blocul interior î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: gradient liniar (45deg, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+ , Safari7+ */ filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 alternativ pe gradient orizontal */ culoare: #ffffff; dimensiunea fontului: 24px; lățime: 150px înălțimea liniei: 20px; text-align: centru; umplutură: 10px 0 10px 10px; stânga: 5px; sus: 5px; )Schimbați imediat culoarea pseudo-elementului :after
Să înlocuim poza, să o punem pe cea neagră la alb, la începutul lecției am încărcat două dintre ele, prescriem a doua pictogramă.
Și în etapa finală, vom descrie stilurile atunci când faceți clic cu mouse-ul
Voi scrie aici comentariul corespunzător, apoi sub el selectăm două blocuri cu pseudo-clasa :active , setăm ingredientul 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 */ fundal: #f22404; /* Browsere vechi */ fundal: -moz-linear-gradient(45deg, #f22404 13%, #8e0b00 49% , #6d0019 70%); /* FF3.6-15 */ fundal: -webkit-linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* Chrome10-25,Safari5 .1-6 */ fundal: gradient liniar(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filtru: progid:DXImage .Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",GradientType=1); /* IE6-9 fallback pe gradient orizontal */ )
Pentru blocul din fundal, vom face gradientul î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 */ fundal: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%); /* Chrome10-25, Safari5.1-6 */ fundal: gradient liniar (135deg, #b3dced 0%, #29b8e5 50%); /* W3C, IE10+, FF16+ , 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, la clic, vom scrie rotirea pictogramei în direcția opusă cu manifestarea sa deplină.
Butonul Dws a:activ img( transformare: rotire(0deg); opacitate: 1; )
S-a dovedit a fi un buton destul de eficient, care poate fi ușor modificat și proiectat pentru a se potrivi sarcinilor dvs. Vă recomand să înlocuiți designul general al acestuia, să vă faceți propriile presetări, să experimentați cu diferite opțiuni de gradient, poate că veți găsi moduri mai originale de animație ș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.
- Traducere
Bună, dragă habradrug! Astăzi vom învăța cum să creăm butoane CSS3 3D! Acestea se bazează pe popularul PSD gratuit de Orman Clark pentru site-ul său Premium Pixels. Vom încerca să creăm o copie a acestor butoane folosind CSS cu o cantitate minimă de cod HTML.
Pasul 1: Crearea unui document HTML
Vom începe prin a crea un nou document HTML. Se va baza pe standardul HTML5, astfel încât să avem un bun punct de plecare. Acum vom adăuga o listă cu link-uri. Asta e practic tot, datorită CSS3 pentru faptul că nu trebuie să folosim div-uri și intervale suplimentare.Vom atribui clasa „butoane” fiecărui element din listă. Și deoarece Orman a folosit culori diferite, vom atribui fiecărui buton propria culoare ca clasă.
Atât avem nevoie în această etapă.
Pasul 2: Reguli de bază CSS
Înainte de a intra în degrade, colțuri rotunjite etc., trebuie să aveți grijă de regulile de bază. Nimic special, simplu CSS2:Ul ( list-style: none; ) a.button (afișare: bloc; float: stânga; poziție: relativă; înălțime: 25px; lățime: 80px; margine: 0 10px 18px 0; text-decor: niciunul; font: 12px " Helvetica Neue", Helvetica, Arial, sans-serif; greutate font: bold; înălțime linie: 25px; text-align: center; )
Acum aplicați regulile pentru diferite culori. De exemplu, pentru gri. Toate celelalte culori pot fi văzute în demo.
/* GRAY */ .gray, .gray:hover (culoare: #555; chenar-jos: 4px solid #b2b1b1; fundal: #eee; .gray:hover ( fundal: #e2e2e2; ) )
Ar trebui să ajungi cu așa ceva. Pare destul de solid, dacă e 2008 în curte. 
Pasul 3: Rame duble!
Dacă te uiți cu atenție la rezultatul final, vei vedea că există o linie subțire în jurul perimetrului întregului buton. Pentru a obține acest efect, vom folosi pseudo-elemente :inainte deși :după.a.button ( afișare: bloc; float: stânga; poziție: relativă; înălțime: 25px; lățime: 80px; margine: 0 10px 18px 0; text-decor: niciunul; font: 12px "Helvetica Neue", Helvetica, Arial, sans -serif; greutate font: bold; line-height: 25px; text-align: center; ) a.button:before, a.button:after (conținut: ""; poziție: absolut; stânga: -1px; înălțime: 25px; lățime: 80px; jos: -1px; ) a.button:before (înălțime: 23px; jos: -4px; chenar-sus: 0; )
Adăugarea de culoare face ca butoanele să arate mult mai bine.
/* GRAY */ .gray, .gray:hover (culoare: #555; chenar-jos: 4px solid #b2b1b1; fundal: #eee; ) .gray:before, .gray:after ( chenar: 1px solid #cbcbcb; chenar-jos: 1px solid #a5a5a5; ) .gray:hover ( fundal: #e2e2e2; )
Pasul 4: Un pic de magie CSS3
Acum să trecem la partea imediată a CSS3. Să începem cu colțurile rotunjite:a.button ( afișare: bloc; float: stânga; poziție: relativă; înălțime: 25px; lățime: 80px; margine: 0 10px 18px 0; text-decor: niciunul; font: 12px "Helvetica Neue", Helvetica, Arial, sans -serif; greutatea fontului: bold; înălțimea liniei: 25px; alinierea textului: centru; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; )
elemente naturale :inainte deși :după au nevoie și de colțuri rotunjite.
a.button:before, a.button:after (conținut: ""; poziție: absolut; stânga: -1px; înălțime: 25px; lățime: 80px; jos: -1px; -webkit-border-radius: 3px; -moz -border-radius: 3px; border-radius: 3px; ) a.button:before (înălțime: 23px; jos: -4px; border-top: 0; -webkit-border-radius: 0 0 3px 3px; -moz- chenar-rază: 0 0 3px 3px; chenar-rază: 0 0 3px 3px; -webkit-box-shadow: 0 1px 1px 0px #bfbfbf; -moz-box-shadow: 0 1px 1px 0px #bfbfbf; box-shadow: 0 1px 1px 0px #bfbfbf; )
În cele din urmă, vom aplica textului degrade, o umbră interioară și o umbră. Pentru a evita erorile în IE6, adăugați state:visited.
/* GRAY */ a.gray, a.gray:hover, a.gray:visited (culoare: #555; chenar-jos: 4px solid #b2b1b1; text-shadow: 0px 1px 0px #fafafa; fundal: #eee; fundal: -webkit-gradient(liniar, stânga sus, stânga jos, de la(#eee), la (#e2e2e2)); fundal: -moz-linear-gradient(sus, #eee, #e2e2e2); casetă-umbră: inserție 1px 1px 0 #f5f5f5; ) .gray:înainte, .gray:după (chenar: 1px solid #cbcbcb; margine-bottom: 1px solid #a5a5a5; ) .gray:hover ( fundal: #e2e2e2; fundal: -webkit- gradient(liniar, stânga sus, stânga jos, de la (#e2e2e2), la (#eee)); fundal: -moz-linear-gradient (sus, #e2e2e2, #eee); )
Rezultatul nostru final, nu chiar atât de rău!
Pasul 5: Am uitat ceva?
În proiectul său, Orman prevedea și statul: activ. Prin urmare, trebuie pur și simplu să-l adăugăm la codul nostru.Vom plasa această parte a codului sub regulile pentru diferite culori.
/* STARE ACTIVĂ */ a.button:activ ( chenar: niciunul; jos: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3); ) a.button:active:before, a.button:active:after ( chenar: niciunul; - webkit-box-shadow: niciunul; -moz-box-shadow: niciunul; box-shadow: niciunul; )
Iată ce vom obține:
Pasul 6 (opțional): Browsere vechi
Așa că am creat butoane CSS3 drăguțe care funcționează în toate browserele moderne. Dar ce zici de Internet Explorer 8 și de mai jos. Aceste browsere nu acceptă umbre sau degrade de text.Pentru a rezolva această problemă, putem folosi biblioteca javascript Modernizr, care poate detecta dacă browserul dvs. acceptă CSS3 și HTML5. Biblioteca nu rezolvă probleme, oferă doar un stil alternativ.
În primul rând, vom crea propria noastră versiune de Modernizr, astfel încât să nu fie nevoie să purtăm cu noi o cantitate mare de javascript. Acest lucru se poate face pe site-ul lor. Odată ce am inserat javascript-ul în documentul nostru, trebuie să definim diferitele reguli de clasă pentru stilul alternativ. Vom folosi imagini pentru acele browsere care nu acceptă raza de frontieră și gradienți.
/* MODERNIZR FALLBACK */ .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generatedcontent a.button, .no-generatedcontent a.button:visited ( fundal: url(images/sprite.png) no-repeat 0 0px; înălțime: 32px; lățime: 82px; ) .no-cssgradients a.button:hover, .no-borderradius a .button:hover, .no-generatedcontent a.button:hover ( fundal: url(images/sprite.png) no-repeat 0 -32px; ) .no-cssgradients a.button:activ, .no-borderradius a.button :activ, .no-generatedcontent a.button:activ ( fundal: url(images/sprite.png) no-repeat 0 -64px; bottom: 0; line-height: 35px; ) .no-cssgradients a.gray, . no-cssgradients a.gray:visited, .no-cssgradients a.gray:hover (background-position-x: 0; ) .no-cssgradients a.pink, .no-cssgradients a.pink:visited, .no-cssgradients a.pink:hover ( background-position-x: -82px; ) .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover ( fundal d-poziție-x: -164px ) .no-cssgradients a.green, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover ( background-position-x: -246px; ) .no-cssgradients a.turcoaz, .no- cssgradients a.turquoise:visited, .no-cssgradients a.turquoise:hover (background-position-x: -328px; ) .no-cssgradients a.black, .no-cssgradients a.black:visited, .no-cssgradients a .black:hover ( background-position-x: -410px; ) .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:vizitat, .no-cssgradients a.darkgray:hover ( background-position-x: - 492px; ) .no-cssgradients a.yellow, .no-cssgradients a.yellow:vizitat, .no-cssgradients a.yellow:hover ( background-position-x: -574px; ) .no-cssgradients a.purple, . no-cssgradients a.purple:visited, .no-cssgradients a.purple:hover (background-position-x: -656px; ) .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visited, .no- cssgradients a.darkblue:hover (background-position-x: -738px; ) .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a .button:hover, .no-cssgradients a.button:înainte, .no-cssgradients a.button:după, .no-borderradius a.button, .no-borderradius a.button:vizitat, .no-borderradius a.button :hover, .no-borderradius a.button:înainte, .no-borderradius a.button:după, .no-generatedcontent a.button, .no-generatedcontent a.button:vizitat, .no-generatedcontent a.button:hover , .no-generatedcontent a.button:înainte, .no-generatedcontent a.button:după ( chenar: 0; )
