CSS3 Tutorial Opret en slank tænd / sluk-knap
Brug af en knap er hidtil den foretrukne måde at interagere med en elektronisk ting på; f.eks. radio, tv, musikafspiller og endda en smartphone, der har en talekommando, har stadig brug for mindst en eller to fysiske knapper.
Desuden er i denne digitale tidsalder den knap har også udviklet sig i sin digitale form, hvilket gør den mere interaktiv, dynamisk og reel nem at lave sammenlignet med den fysiske knap.
Så denne gang vil vi oprette en smidig og interaktiv knap, der er baseret på dette fremragende design over på Dribbble ved kun at bruge CSS.
Nå, lad os bare komme i gang.
HTML
Vi vil starte knappen ved at placere følgende markering på vores HTML-dokument. Det er meget enkelt, knappen ville være baseret på et anker tag, vi har også a span ud for at oprette indikatorlyset, og så pakkes de sammen i en HTML5 afsnit tag.
& # XF011;
Sådan ser vores knap oprindeligt ud.
Basic Styling
I dette afsnit begynder vi at arbejde på styles.
Vi anvender først denne mørke baggrund fra Subtle Pattern på kroppens dokument og centrerer afsnit. Så fjerner vi også prikket omrids på :fokus og :aktiv link.
krop baggrund: url ('images / micro_carbon.png'); sektion margin: 150px auto 0; bredde: 75px; højde: 95px; stilling: relativ; tekst-align: center; : aktiv,: fokus disposition: 0; Brug af brugerdefineret skrifttype
For knappens ikon bruger vi en brugerdefineret skrifttype fra Font Awesome snarere end et billede. På den måde vil ikonet let kunne stiles og skaleres gennem stilarket.
Download skrifttypen, gem skriftfilerne (eot, woff, ttf og svg) i skrifttyper mappe, og læg derefter den følgende kode på dit stylesheet for at definere en ny skrifttypefamilie.
@ font-face font-family: "FontAwesome"; src: url ("skrifttyper / fontawesome-webfont.eot"); src: url ("skrifttyper / fontawesome-webfont.eot? #iefix") format ('eot'), url ("skrifttyper / fontawesome-webfont.woff") format ('woff'), url ("skrifttyper / fontawesome- webfont.ttf ") format ('truetype'), url (" skrifttyper / fontawesome-webfont.svg # FontAwesome ") format ('svg'); skrifttype-vægt: normal; skrifttypestil: normal; 
Det strøm ikon at vi har brug for denne knap er repræsenteret i Unicode nummer F011; Hvis du ser nøje på HTML-markeringen ovenfor, har vi sat dette numeriske tegn & # XF011; inden for ankeretiketten, men da vi ikke har defineret brugerdefineret font-family I knapstilen skal ikonet endnu ikke gengives korrekt.
Yderligere læsning: Unicode og HTML: Dokumentkarakterer
Styling knappen
Først og fremmest skal vi definere brugerdefineret font-family for knappen.
Vores knap vil være en cirkel, vi kan opnå cirkel effekten ved hjælp af border-radius ejendom og indstil værdien i mindst halvdelen af knappens bredde.
Siden bruger vi en skrifttype til ikonet, vi kan nemt indstille farve og tilføj tekst-skygge for ikonet i stilarket også.
Dernæst vil vi også lave en afskåret effekt for knappen. Denne effekt er ret vanskelig. For det første skal vi søge baggrundsfarve: rgb (83,87,93); for knappens farvebase, så tilføjer vi op til fire lag af box-skygger.
en font-familie: "FontAwesome"; farve: rgb (37,37,37); tekstskygge: 0px 1px 1px rgba (250,250,250,0,1); skrifttypestørrelse: 32pt; display: blok; stilling: relativ; tekst dekoration: ingen; baggrundsfarve: rgb (83,87,93); box-skygge: 0px 3px 0px 0px rgb (34,34,34), / * 1ste skygge * / 0px 7px 10px 0px rgb (17,17,17), / * 1nd skygge * / indsats 0px 1px 1px 0px rgba , 250, 250, .2), / * 3. Skygge * / indsæt 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. skygge * / bredde: 70px; højde: 70px; grænse: 0; grænse-radius: 35px; tekst-align: center; linjehøjde: 79px;
Der er også en større cirkel udenfor knappen, og vi vil bruge :Før pseudo-element for det snarere end at tilføje ekstra markup.
a: før indhold: ""; bredde: 80px; højde: 80px; display: blok; z-indeks: -2; position: absolut; baggrundsfarve: rgb (26,27,29); venstre: -5px; top: -2px; grænse-radius: 40px; box-skygge: 0px 1px 0px 0px rgba (250,250,250,0,1), indsæt 0px 1px 2px rgba (0, 0, 0, 0,5);
Yderligere læsning: CSS: før og efter pseudo-elementer (Hongkiat.com)
Indikator lys
Under knappen er der et lille lys for at angive Power On og Off status. Nedenfor anvender vi rødt for lysets farve, fordi strømmen i starten er OFF, tilføjer vi også box-shadow at efterligne lysets lysende virkning.
a + span display: block; bredde: 8px; højde: 8px; baggrundsfarve: rgb (226,0,0); box-skygge: indsæt 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); grænse-radius: 4px; klare: begge; position: absolut; bunden: 0; venstre: 42%;
Effekten
På dette tidspunkt begynder vores knap at se godt ud, og vi har kun brug for at tilføje nogle effekter på den, for eksempel når knappen er 'blive' klikket på, vil vi have knappen så som den trykkes og holdes nede.
For at opnå effekten, den første box-shadow i knappen bliver nulstillet og positionen sænkes en smule. Vi skal også justere de tre andre skyggeintensiteter lidt for at matche knapens position.
a: aktiv boksskygge: 0px 0px 0px 0px rgb (34,34,34), / * 1ste skygge * / 0px 3px 7px 0px rgb (17,17,17), / * 2. skygge * / indsats 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3. Skygge * / indsæt 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4. skygge * / baggrundsfarve: rgb (83,87,93); top: 3px;
Når du har klikket på knappen, skal den forblive presset ned, og ikonet skal "skinne" for at indikere, at strømmen er tændt.
For at opnå en sådan effekt vil vi målrette knappen ved hjælp af :mål pseudo-klasse, Skift derefter ikonets farve til hvid og tilføj en tekst-skygge med hvid farve også.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), indsæt 0px 1px 1px 0px rgba (250, 250, 250, .2) , indsæt 0px -10px 35px 5px rgba (0, 0, 0, .5); baggrundsfarve: rgb (83,87,93); top: 3px; farve: #fff; tekstskygge: 0px 0px 3px rgb (250,250,250);
Yderligere læsning: Brug: mål pseudo-klasse
Vi skal også justere box-shadow i cirklen uden for knappen, som følger.
a: aktiv: før, a: mål: før top: -5px; baggrundsfarve: rgb (26,27,29); box-skygge: 0px 1px 0px 0px rgba (250,250,250,0,1), indsæt 0px 1px 2px rgba (0, 0, 0, 0,5);
Lysindikatoren vender fra standard rød til grøn farve for at understrege, at strømmen allerede er tændt.
a: target + span box-shadow: indsæt 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); baggrundsfarve: rgb (135.187,83);
Overgangseffekt
Endelig vil vi også anvende følgende overgangseffekt for at gøre knapens effekt kørende.
Denne uddrag nedenfor vil specifikt tilføje overgangen til farve ejendom og tekst-skygge til 350 ms i ankerelementet.
en overgang: farve 350ms, tekstskygge 350ms; -o-overgang: farve 350ms, tekstskygge 350ms; -moz-overgang: farve 350ms, tekstskygge 350ms; -webkit-overgang: farve 350ms, tekstskygge 350ms;
Dette andet uddrag nedenfor vil tilføje overgangen til baggrundsfarve og box-shadow ejendom i lysindikatoren.
a: mål + span overgang: baggrundsfarve 350ms, box-skygge 700ms; -o-overgang: baggrundsfarve 350ms, box-skygge 700ms; -moz-overgang: baggrundsfarve 350ms, box-skygge 700ms; -webkit-overgang: baggrundsfarve 350ms, box-skygge 700ms;
Endeligt resultat
Vi har gennemgået alle de stilarter vi har brug for, nu kan du se det endelige resultat live samt download kildefilen fra nedenstående links.
- Demo
- Download kilde
Bonus: Sådan slukkes den
Her kommer bonussen. Hvis du har prøvet knappen fra ovenstående demo, har du bemærket, at knappen kun kan klikkes en gang, en, der skal tænde den, så hvordan slukker vi den?.
Desværre skal vi gøre det med jQuery, men det er også meget simpelt. Nedenfor er al den jQuery-kode, vi har brug for.
$ (dokument) .ready (funktion () $ ('# knap'). klik (funktion () $ (dette) .toggleClass ('on'););); Udsnittet ovenfor vil tilføje klassen ON i ankeret, og vi brugte toggleClass funktion fra jQuery for at tilføje den. Så når #knap klikkes på, jQuery vil kontrollere om klassen ON er tilføjet eller ej: Hvis ikke, tilføjer jQuery klassen, og hvis den er blevet tilføjet, vil jQuery fjerne klassen.
Bemærk: Glem ikke at inkludere jQuery-biblioteket.
Nu er vi nødt til at ændre stilen lidt. Du skal blot erstatte alle de :mål pseudo-element med .på klassevælger, som følger:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), indsæt 0px 1px 1px 0px rgba (250, 250, 250, .2) , indsæt 0px -10px 35px 5px rgba (0, 0, 0, .5); baggrundsfarve: rgb (83,87,93); top: 3px; farve: #fff; tekstskygge: 0px 0px 3px rgb (250,250,250); a: aktiv: før, a.on: før top: -5px; baggrundsfarve: rgb (26,27,29); box-skygge: 0px 1px 0px 0px rgba (250,250,250,0,1), indsæt 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: indsæt 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); baggrundsfarve: rgb (135.187,83);
Endelig lad os prøve det i browseren.
- Demo
- Download kilde
