CSS3 Handledning Skapa en slank på / av-knapp
Med en knapp är hittills det föredragna sättet att interagera med elektroniska saker; som radio, tv, musikspelare och till och med en smartphone som har en röstkommandofunktion behöver fortfarande minst en eller två fysiska knappar.
Vidare, i denna digitala ålder, den knapp har utvecklats i sin digitala form också, vilket gör den mer interaktiv, dynamisk och verklig lätt att göra, jämfört med den fysiska knappen.
Så, den här gången kommer vi att skapa en smidig och interaktiv knapp som bygger på denna utmärkta design över på Dribbble med endast CSS.
Tja, låt oss bara komma igång.
html
Vi startar knappen genom att placera följande markering på vårt HTML-dokument. Det är verkligen enkelt, knappen skulle baseras på en ankare tagg, vi har också en spänna bredvid det för att skapa indikatorlampan, och sedan är de inlindade i en HTML5 sektion märka.
& # XF011;
Så här ser vår knapp ut.
Grundläggande Styling
I det här avsnittet börjar vi arbeta på Styles.
Vi applicerar först den här mörka bakgrunden från Subtle Pattern på kroppens dokument och centrerar sektion. Då tar vi också bort den prickade översikt på :fokus och :aktiva länk.
kropp bakgrund: url ('images / micro_carbon.png'); avsnitt margin: 150px auto 0; bredd: 75px; höjd: 95px; position: relativ; text-align: center; : aktiv,: fokus disposition: 0; Använda anpassad typsnitt
För knappens ikon använder vi en anpassad typsnitt från Font Awesome snarare än en bild. På så sätt kan ikonen enkelt utformas och skalas genom stilarket.
Hämta typsnittet, lagra typfilerna (eot, woff, ttf och svg) i typsnitt mapp och placera sedan följande kod i ditt stilark för att definiera en ny typfamilj.
@ font-face font-family: "FontAwesome"; src: url ("teckensnitt / fontawesome-webfont.eot"); src: url ("fonter / fontawesome-webfont.eot? #iefix") format ("eot"), url ("fonts / fontawesome-webfont.woff") format ("woff"), url ("teckensnitt / fontawesome- webfont.ttf ") format (" truetype "), url (" fonts / fontawesome-webfont.svg # FontAwesome ") format ('svg'); typsnitt: normal; typsnittstyp: normal; 
De ström ikon som vi behöver för den här knappen är representerad i Unicode-nummer F011; Om du tittar noga på HTML-markupen ovan har vi satt den här siffran & # XF011; inom ankaretiketten, men eftersom vi inte har definierat anpassningen typsnittsfamilj I knappstilen återges ikonen ännu inte.
Vidare läsning: Unicode och HTML: Dokumenttecken
Styling knappen
Först av allt måste vi definiera anpassningen typsnittsfamilj för knappen.
Vår knapp kommer att vara en cirkel, vi kan uppnå cirkel effekten med hjälp av border-radius egenskap och ange värdet åtminstone hälften av knappens bredd.
Eftersom vi använder ett teckensnitt för ikonen kan vi enkelt ställa in Färg och lägg till text-shadow för ikonen i stilarket också.
Därefter skapar vi också en avfasad effekt för knappen. Denna effekt är ganska knepig. Först måste vi ansöka bakgrundsfärg: rgb (83,87,93); för knappens färgbas, lägger vi till upp till fyra lager av box-skuggor.
en font-family: "FontAwesome"; färg: rgb (37,37,37); textskugga: 0px 1px 1px rgba (250,250,250,0,1); typsnittstorlek: 32pt; display: block; position: relativ; text-dekoration: ingen; bakgrundsfärg: rgb (83,87,93); boxskugga: 0px 3px 0px 0px rgb (34,34,34), / * 1: a skugga * / 0px 7px 10px 0px rgb (17,17,17), / * 1: a skugga * / inmatning 0px 1px 1px 0px rgba , 250, 250, .2), / * 3. Skugga * / inset 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4: e skugga * / bredd: 70px; höjd: 70px; gräns: 0; gränsstråle: 35px; text-align: center; linjehöjd: 79px;
Det finns också en större cirkel på utsidan av knappen och vi kommer att använda :innan pseudo-elementet för det istället för att lägga till extra markup.
a: före innehåll: ""; bredd: 80px; höjd: 80px; display: block; z-index: -2; position: absolut; bakgrundsfärg: rgb (26,27,29); vänster: -5px; topp: -2px; gränsstråle: 40px; boxskugga: 0px 1px 0px 0px rgba (250,250,250,0,1), inmat 0px 1px 2px rgba (0, 0, 0, 0,5);
Vidare läsning: CSS: före och efter pseudo-element (Hongkiat.com)
Indikator ljus
Under knappen finns det ett litet ljus för att ange strömmen på och av. Nedan tillämpar vi rött på ljusets färg eftersom strömmen är inledningsvis AV, lägger vi också till box-shadow att imitera ljusets skenande effekt.
a + span display: block; bredd: 8px; höjd: 8px; bakgrundsfärg: rgb (226,0,0); boxskugga: inmatning 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); gränsstråle: 4px; klara: båda; position: absolut; botten: 0; vänster: 42%;
Effekten
Vid denna tidpunkt börjar vår knapp att se bra ut och vi behöver bara lägga till några effekter på den, till exempel när knappen är "att" klickas på, vill vi att knappen ser ut som den trycks ner och hålls nere.
För att uppnå effekten, den första box-shadow i knappen nollställs och läget sänks lite. Vi måste också justera de andra tre skuggans intensiteter lite för att matcha knapppositionen.
a: aktiv boxskugga: 0px 0px 0px 0px rgb (34,34,34), / * 1: a skugga * / 0px 3px 7px 0px rgb (17,17,17), / * 2: a skugga * / inmatning 0px 1px 1px 0px rgba (250, 250, 250, .2) / / 3: e Shadow * / inset 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4: e skugga * / bakgrundsfärg: rgb (83,87,93); topp: 3px;
Dessutom, när knappen har blivit klickad, bör den förbli nedtryckt och ikonen ska "lysa" för att indikera att strömmen är PÅ.
För att uppnå en sådan effekt kommer vi att rikta in knappen med hjälp av :mål pseudo-klass, ändra sedan ikonens färg till vit och lägg till en text-shadow med vit färg också.
a: mål box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inmatning 0px 1px 1px 0px rgba (250, 250, 250, .2) , insätt 0px -10px 35px 5px rgba (0, 0, 0, .5); bakgrundsfärg: rgb (83,87,93); topp: 3px; färg: #fff; textskugga: 0px 0px 3px rgb (250,250,250);
Vidare läsning: Användning: Mål pseudo-klass
Vi måste också justera box-shadow i cirkeln utanför knappen, enligt följande.
a: aktiv: före, a: mål: före topp: -5px; bakgrundsfärg: rgb (26,27,29); boxskugga: 0px 1px 0px 0px rgba (250,250,250,0,1), inmat 0px 1px 2px rgba (0, 0, 0, 0,5);
Lysindikatorn kommer att växla från standard röd till grön färg för att betona att strömmen redan är PÅ.
a: mål + span box-skugga: inset 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); bakgrundsfärg: rgb (135 187,83);
Övergångs effekt
Slutligen, för att knappens effekt ska fungera smidigt, kommer vi också att tillämpa följande övergångseffekt.
Nedan nedan läggs övergången till Färg egendom och text-shadow för 350 ms i ankarelementet.
en övergång: färg 350ms, textskugga 350ms; -övergång: färg 350ms, textskugga 350ms; -moz-övergång: färg 350ms, textskugga 350ms; -webkit-övergång: färg 350ms, textskugga 350ms;
Detta andra stycke nedan kommer att lägga till övergången för bakgrundsfärg och box-shadow egenskap i ljusindikatorn.
a: mål + span övergång: bakgrundsfärg 350ms, boxskugga 700ms; -övergång: bakgrundsfärg 350ms, boxskugga 700ms; -moz-övergång: bakgrundsfärg 350ms, boxskugga 700ms; -webkit-övergång: bakgrundsfärg 350ms, boxskugga 700ms;
Slutresultat
Vi har kommit igenom alla stilar vi behöver, nu kan du se det slutliga resultatet live samt ladda ner källfilen från länkarna nedan.
- demo
- Hämta källa
Bonus: Hur stänger du av det
Här kommer bonusen. Om du har testat knappen från ovanstående demo har du märkt att knappen bara kan klickas en gång, en som ska sätta på den, så hur stänger du av den?.
Tyvärr måste vi göra det med jQuery, men det är också enkelt. Nedan finns alla jQuery-koden vi behöver.
$ (dokument) .ready (funktion () $ ('# -knappen'). klicka (funktion () $ (detta) .toggleClass ('on'););); Biten ovan kommer att lägga till klassen ON i ankaren, och vi använde toggleClass funktionen från jQuery för att lägga till den. Så när #knapp klickas på, jQuery kommer att kontrollera om klassen ON har lagts till eller inte: när det inte är så kommer jQuery att lägga till klassen, och om den har lagts till tar jQuery bort klassen.
Notera: Glöm inte att inkludera jQuery-biblioteket.
Nu måste vi ändra stilen lite. Byt bara ut alla :mål pseudo-elementet med .på klassväljare, enligt följande:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inmatning 0px 1px 1px 0px rgba (250, 250, 250, .2) , insätt 0px -10px 35px 5px rgba (0, 0, 0, .5); bakgrundsfärg: rgb (83,87,93); topp: 3px; färg: #fff; textskugga: 0px 0px 3px rgb (250,250,250); a: aktiv: före, a.on: före topp: -5px; bakgrundsfärg: rgb (26,27,29); boxskugga: 0px 1px 0px 0px rgba (250,250,250,0,1), inmat 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); bakgrundsfärg: rgb (135 187,83);
Slutligen, låt oss prova det i webbläsaren.
- demo
- Hämta källa
