Typeset butoane rotunde pe CSS3

Sunteți aici: Pagina principală - CSS - CSS3 - butoane rotunde pe culegătorie CSS3.

Bună ziua dragi cititori. Am învățat deja multe dintre proprietățile care apar în CSS3. ci doar să-i cunosc un pic. Este necesar de a practica! Și acum vă voi arăta cum să creați un buton rotund pe CSS3.

Deschideți fișierul index.html și de a crea o structură simplă

Nimic deosebit. Doar 3 blocuri din clasa .button Să ne întoarcem acum la stiluri.

box-umbra: 0 3px 20px RGBA (0,0,0, .25),
2px platcă 0 0 RGBA (255,255,255, .6),
0 0 2px RGBA (0,0,0, .1),
platcă 0 0 20px RGBA (0,0,0, .1);
>

Context pentru document și cheile noastre am luat site-ul subtlepatterns.com.

Ne face div linia-bloc, astfel încât acestea să aliniaza orizontal, cerându-le să înălțimea, lățimea, decalat față de marginile browser-ului, rotunjire 50%. pentru a obține un cerc, iar atunci când treceți do indicatorul mouse-ului. Nu este nimic complicat, dar umbra am separat cu bună știință în stiluri ca aceasta este partea care poate fi dificil, totuși, există, de asemenea, foarte simplu, și o veți vedea chiar acum.

Specifică prima umbra, vom vedea deja conturul gama noastră:

box-umbra: 0 3px 20px RGBA (0,0,0, .25);

Apoi ne cerem umbra interioară. că am avut astfel de okontovochka sus și butonul a devenit mai vrac.

box-umbra: 0 3px 20px RGBA (0,0,0, .25),
2px platcă 0 0 RGBA (255,255,255, .6);

Pe lângă nuanța exterioară este necesară pentru a întuneca un loc mic de sub butonul de mai jos și urmând interne obturează spațiul din interiorul butonului de efect)

box-umbra: 0 3px 20px RGBA (0,0,0, .25),
2px platcă 0 0 RGBA (255,255,255, .6),
0 0 2px RGBA (0,0,0, .1),
platcă 0 0 20px RGBA (0,0,0, .1);

După cum puteți vedea, la început, se pare dificil, o mulțime de proprietăți, dar dacă te uiți, totul este mult mai ușor. Deci, aici este rezultatul final:

Acum vom pune în aplicare un comportament, atunci când prezentați la blocul

Butonul: Hover box-shadow: inset 0 0 20px RGBA (0,0,0, .2),
0 0 2px RGBA (255,255,255, .4),
2px platcă 0 0 RGBA (0,0,0, .1);
>

Ne-am ocupat deja cu umbrele în bloc, iar acum încearcă să se înțeleagă cu ce se întâmplă atunci când vă deplasați. În mod similar, lăsați doar o umbră și să vedem ce se întâmplă, și apoi se adaugă un al doilea și a vedea ce sa schimbat, și așa mai departe.

În cele din urmă, să adăugați butoane noastre icon, care nu a fost foarte plictisitor. Pentru a face acest lucru, vom schimba un pic html

Tocmai am adăugat o clasă în plus pentru fiecare buton, iar acum să le ceară stiluri

Aici, pur și simplu adăugați un al doilea fundal pentru fiecare buton, luând pictogramele defaulticon.com site-ului.

Asta e tot. Astăzi, ne-am uitat la modul de a crea un buton rotund pe CSS3.