Tutorial CSS3 Creați un buton On / Off elegant
Utilizarea unui buton este, până acum, modul preferat de a interacționa cu o chestiune electronică; cum ar fi radioul, televizorul, music player-ul și chiar un smartphone care are o funcție de comandă vocală, are încă nevoie de cel puțin unul sau două butoane fizice.
În plus, în această epocă digitală, buton a evoluat și în forma sa digitală, ceea ce îl face mai interactivă, dinamică și mai ușor de realizat, comparativ cu butonul fizic.
Deci, de data aceasta, vom crea un buton slick și interactiv care se bazează pe acest design excelent peste la Dribbble folosind doar CSS.
Ei bine, hai să începem.
HTML
Vom porni butonul plasând următoarea marcaj pe documentul nostru HTML. Este foarte simplu, butonul se va baza pe o etichetă de ancorare, avem și o deschidere lângă el pentru a crea lumina indicatoare, și apoi sunt înfășurate împreună într-un HTML5 secțiune etichetă.
& # XF011;
Iată cum arată inițial butonul nostru.
Stilul de bază
În această secțiune, vom începe să lucrăm la stiluri.
Aplicăm în primul rând acest fundal întunecat din Modelul Subtil pe documentul corpului și centrează secțiune. Apoi, vom elimina, de asemenea, punctat contur pe : focus și :activ legătură.
corpul background: url ('images / micro_carbon.png'); secțiunea marja: 150px auto 0; lățime: 75px; înălțime: 95px; poziția: relativă; text-align: centru; : activ,: focalizare contur: 0; Utilizarea fontului personalizat
Pentru pictograma butonului, vom folosi un font personalizat de la Font Awesome mai degrabă decât o imagine. În acest fel, pictograma va fi cu ușurință capabilă de stil și poate fi scalabilă prin intermediul foii de stil.
Descărcați fontul, stocați fișierele de fonturi (eot, woff, ttf și svg) în fonturi , apoi plasați următorul cod pe foaia de stil pentru a defini o nouă familie de fonturi.
@ font-face font-familie: "FontAwesome"; src: url ("fonturi / fontawesome-webfont.eot"); src: formatul ('fonts / fontawesome-webfont.eot? #iefix') format ('eot'), url ("fonts / fontawesome-webfont.woff" webfont.ttf "format (" truetype "), url (" fonts / fontawesome-webfont.svg # FontAwesome ") format ('svg'); font-weight: normal; font-style: normal; 
putere pictogramă de care avem nevoie pentru acest buton este reprezentat în numărul Unicode F011; dacă vă uitați atent la marcajul HTML de mai sus, am pus acest caracter numeric & # XF011; în eticheta de ancorare, dar din moment ce nu am definit personalizat familie de fonturi în stilul butonului, pictograma nu este încă redată corect.
Citirea ulterioară: Unicode și HTML: caracterele documentului
Styling Butonul
Mai întâi de toate, trebuie să definim obiceiul familie de fonturi pentru buton.
Butonul nostru va fi un cerc, putem obține efectul cercului folosind border-radius proprietate și setați valoarea la cel puțin jumătate din buton lăţime.
Din moment ce folosim un font pentru pictogramă, putem seta cu ușurință culoare si adauga text-shadow pentru pictograma din foaia de stil, de asemenea.
Apoi, vom crea, de asemenea, un efect basculat pentru buton. Acest efect este destul de dificil. În primul rând, trebuie să aplicăm fundal-culoare: rgb (83,87,93); pentru baza de culori a butonului, adăugăm până la patru straturi de box-umbre.
un font-family: "FontAwesome"; culoare: rgb (37,37,37); text-shadow: 0px 1px 1px rgba (250,250,250,0.1); font-size: 32pt; afișare: bloc; poziția: relativă; text-decorare: nici unul; fundal-culoare: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1st Shadow * / 0px 7px 10px 0px rgb (17,17,17), / * 1a Shadow * / inset 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * A treia umbră * / inset 0px -12px 35px 0px rgba (0, 0, 0, .5); / * Umbra 4 * / lățimea: 70px; înălțime: 70px; frontieră: 0; raza de graniță: 35px; text-align: centru; linia-înălțime: 79px;
Există, de asemenea, un cerc mai mare în exteriorul butonului și vom folosi :inainte de pseudo-element de pentru aceasta, mai degrabă decât să adăugați marcare suplimentară.
a: înainte de content: ""; lățime: 80px; înălțime: 80px; afișare: bloc; z-index: -2; poziția: absolută; fundal-culoare: rgb (26,27,29); stânga: -5px; top: -2px; raza de graniță: 40px; box-shadow: 0px 1px 0px 0px rgba (250.250.250,0.1), inset 0px 1px 2px rgba (0, 0, 0, 0.5);
Citirea ulterioară: CSS: înainte și după pseudo-elementele (Hongkiat.com)
Indicator luminos
Sub buton, există o lumină mică pentru a desemna starea de pornire și oprire a alimentării. Mai jos, aplicăm roșu pentru culoarea luminii, deoarece puterea este inițial dezactivată, adăugăm și ea box-shadow pentru a imita efectul de strălucire a luminii.
a + span afișare: bloc; lățime: 8px; înălțime: 8px; fundal-culoare: rgb (226,0,0); box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (226,0,0,0,5); raza de graniță: 4 pixeli; clar: ambele; poziția: absolută; fund: 0; stânga: 42%;
Efectul
În acest moment, butonul nostru începe să arate bine și trebuie doar să adăugăm anumite efecte asupra acestuia, de exemplu, când butonul este "apăsat", dorim ca butonul să arate că este apăsat și ținut apăsat.
Pentru a obține efectul, primul box-shadow în butonul va fi zero și poziția va fi coborâtă puțin. De asemenea, trebuie să ajustăm puțin intensitățile celorlalte trei umbre pentru a se potrivi cu poziția butonului.
a: activă box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1st Shadow * / 0px 3px 7px 0px rgb (17,17,17), / * 2a Shadow * / inset 0px 1px 1px 0px rgba (250, 250, 250, .2), / * a 3-a Shadow * / inset 0px-10px 35px 5px rgba (0, 0, 0, .5); / * Umbra 4 * / fundal-culoare: rgb (83,87,93); top: 3px;
În plus, odată ce butonul a fost apăsat, trebuie să rămână apăsat și pictograma trebuie să "strălucească" pentru a indica că alimentarea este activată.
Pentru a obține un astfel de efect, vom viza butonul folosind :ţintă pseudo-clasă, apoi schimbați culoarea pictogramei în alb și adăugați o text-shadow cu culoarea albă.
a: țintă box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, , inserați 0px-10px 35px 5px rgba (0, 0, 0, .5); fundal-culoare: rgb (83,87,93); top: 3px; culoare: #fff; text-shadow: 0px 0px 3px rgb (250,250,250);
Citirea ulterioară: Utilizarea: țintă pseudo-clasă
De asemenea, trebuie să ajustăm box-shadow în cercul din afara butonului, după cum urmează.
a: activ: înainte, a: țintă: înainte de top: -5px; fundal-culoare: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250.250.250,0.1), inset 0px 1px 2px rgba (0, 0, 0, 0.5);
Indicatorul luminos se va întoarce de la culoarea implicită roșie în verde pentru a sublinia că alimentarea este deja activată.
a: țintă + span box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); fundal-culoare: rgb (135,187,83);
Efect de tranziție
În cele din urmă, pentru a face efectul butonului să funcționeze fără probleme, vom aplica și următorul efect de tranziție.
Acest fragment de mai jos va adăuga în mod specific trecerea la culoare proprietate și text-shadow pentru 350MS în elementul de ancorare.
a tranziție: culoare 350ms, text-shadow 350ms; -o-tranziție: culoare 350ms, text-shadow 350ms; -moz-tranziție: culoare 350ms, text-shadow 350ms; -webkit-tranziție: culoare 350ms, text-shadow 350ms;
Acest al doilea fragment va adăuga tranziția pentru culoare de fundal și box-shadow proprietăți în indicatorul luminos.
a: țintă + span tranziție: fundal-culoare 350ms, box-shadow 700ms; -o-tranziție: fundal-culoare 350ms, cutie-shadow 700ms; -moz-tranziție: fundal-culoare 350ms, box-shadow 700ms; -webkit-tranziție: fundal-culoare 350ms, box-shadow 700ms;
Rezultat final
Am venit prin toate stilurile de care avem nevoie, acum puteți vedea rezultatul final în direct, precum și descărca fișierul sursă de la link-urile de mai jos.
- Demo
- Descărcați sursa
Bonus: Cum să îl dezactivați
Aici vine bonusul. Dacă ați încercat butonul din demo-ul de mai sus, ați observat că butonul poate fi apăsat numai o singură dată, care va fi activat, așa cum îl vom dezactiva?.
Din păcate, trebuie să o facem cu jQuery, dar este și foarte simplu. Mai jos este codul jQuery de care avem nevoie.
$ (document) .ready (functie () $ ('# button'). Fragmentul de mai sus va adăuga clasa ON în ancora și am folosit toggleClass funcția de la jQuery pentru ao adăuga. Deci, atunci când #buton este făcută clic pe, jQuery va verifica dacă clasa ON a fost adăugată sau nu: atunci când nu este, jQuery va adăuga clasa și, dacă a fost adăugată, jQuery va elimina clasa.
Notă: Nu uitați să includeți biblioteca jQuery.
Acum trebuie să schimbăm puțin stilul. Pur și simplu înlocuiți toate :ţintă pseudo-element de cu .pe selector de clasă, după cum urmează:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, .2) , inserați 0px-10px 35px 5px rgba (0, 0, 0, .5); fundal-culoare: rgb (83,87,93); top: 3px; culoare: #fff; text-shadow: 0px 0px 3px rgb (250,250,250); a: activ: înainte, a.on: înainte de top: -5px; fundal-culoare: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250.250.250,0.1), inset 0px 1px 2px rgba (0, 0, 0, 0.5); a.on + spațiu box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); fundal-culoare: rgb (135,187,83);
În cele din urmă, să o încercăm în browser.
- Demo
- Descărcați sursa
