Följ med då vi skapar en enkel och rolig nedladdningsknapp med några snygga CSS3. Vår knapp kommer att använda massor av roliga godisar, inklusive gränsradie, boxskuggning, linjära gradienter, z-index och övergångar för att uppnå en unik dubbelglidande låseffekt på svävaren.
När vi går ska jag diskutera varför vissa tekniker som du kanske tror att ska användas bör undvikas. Övergångar är knepiga att arbeta med och är ganska benägna att vägra att arbeta med vissa egenskaper. Läs vidare för att få veta mer.
Konceptet
Löst baserat på den här tanken ville jag skapa en nedladdningsknapp med en cool glidlådseffekt där ursprungligen dold information dyker upp när användaren börjar en svängningsevenemang. För att sätta min egen spinn på det bestämde jag att dubbla effekten och skapa en låda både på toppen och botten av knappen (klicka här för en snygg titt på det färdiga resultatet).
Så här fungerar det: Med en kombination av HTML och CSS skapar vi tre separata bitar. Dessa inkluderar huvudknappen och två mindre informationspaneler. De mindre paneler kommer först att gömma sig under den större knappen, då när användaren svävar skjuter man uppåt och den andra nedåt.
Som du kan se kommer det att bli ett ganska enkelt projekt som är perfekt för nybörjare som letar efter sina CSS-färdigheter. Speciellt värt att lära sig är hur vi använder absolut positionering och stapling via z-index.
Vad som inte fungerar
När jag planerade ut detta projekt kom jag på ett par sätt att göra mitt konceptarbete. Med tanke på att jag har varit på en pseudo-elementspark på senare tid, var det sättet jag valde att strukturera projektet ursprungligen genom användning av: före och efter.
Med dessa pseudoelement kan vi bara koda nedladdningsknappen i vår HTML och sedan lägga till i vingarna med ren CSS. Det verkar som en optimal lösning och det fungerade verkligen bra? tills jag försökte animera övergången. Oavsett vad jag försökte kunde jag helt enkelt inte få övergången till jobbet.
Efter lite forskning upptäckte jag att den enda Firefox stöder CSS-övergångar på pseudoelement. Det här är en riktig bummer som verkligen begränsar det roliga vi kan ha med: före och efter, men på uppsidan lärde jag mig en värdefull lektion som kommer att spara mig mycket tid och problem i framtiden.
I tutorials som den här får du inte ofta höra om var författaren misslyckades, men jag tycker att det är viktigt att kommunicera dessa misslyckanden så att du kan lära av dem som jag har. Nu nästa gång du vill animera ett pseudoelement kommer du komma ihåg att det inte fungerar i de flesta webbläsare!
Misslyckanden åt sidan, låt oss hoppa in i en metod som kommer arbete.
Knappen
Till att börja skapar och utformar vi vår knapp. När vi har det på plats, blir det lättare att bilda de andra elementen. Allt vi behöver i HTML-avdelningen är en enda div som innehåller en länk. Vi kan helt enkelt använda länken för knappen men vi måste gruppera flera objekt tillsammans så att en div är nödvändig.
Knappform och storlek
HTML-koden ovan skulle bara ge dig en vanlig textlänk. Vi ska förvandla detta till en knapp med en viss bakgrundsform och storlek. För att göra detta börjar vi med några dimensioner, lägg till lite färg och ställ in visningsvärdet för att blockera.
Här är en titt på vad din knapp ska se ut efter det här steget. Det ser inte ut som mycket ännu, men det blir en snygg tittningsknapp innan du vet det.
Typ stilar
Den första fula grejen om knappen ovan som vi behöver fixa är typen, det är för närvarande en röra. Lyckligtvis är det lätt att ta itu med. Allt vi behöver göra är att ange färgen till vit, förklara ett teckensnitt och centrera det.
Det finns ett par intressanta saker att notera här. Först märker jag att jag använder "font" stenografi i stället för att löpa genom att nå skriftfältet för sig själv. Detta är ett utmärkt sätt att spara utrymme och hålla dina typstilar snygga och korta. Ordern här är som följer:
Här är ett annat snyggt knep: Jag ställer linjens höjd till 50px för att centrera den vertikalt i knappen. Observera också att jag tog bort texten understruken och omvandlade typen som stor bokstav. Varför skrev jag inte bara i alla kepsar i HTML? Eftersom detta verkligen är ett stilval och kan förändras med en framtida redesign.
Nu ser vår knapp mycket bättre ut!
CSS3 Magic
Vid den här tiden ser vår knapp fortfarande lite slätt ut. Om du är cool med minimalt utseende kan du hoppa framåt. Annars, låt oss göra det lite mer intressant. Det första vi gör är att runda av hörnen. Se till att du lägger till alla tre webbläsarens prefix:
Därefter kastar vi i en boxskugga. Återigen behöver vi tre versioner som täcker de olika webbläsarna. Shorthandvärdesordningen här är horisontell offset, vertikal offset, oskärpa och färg.
Slutligen, vi kommer att kasta i en lutning. Tyvärr krävs det en hel del röst med kod. Hur gradienterna fungerar nyligen förändras så inte bara behöver vi flera prefix, vi behöver också flera syntaxer för att se till att vi stöder allt.Jag kommer att vara ärlig, jag sällan kodar dessa saker för hand. I stället använder jag Ultimate Gradient Generator och klistra in i den genererade koden. Här är resultatet:
Nu är vår knapp helt stylad och ser bra ut. Här är resultatet:
Lägga till lådorna
Nu när vår primära knapp är klar, är det dags att lägga till de lilla lådorna som kommer att glida ut från toppen och botten (kanske? Vingar? Är lämplig term). För att göra detta börjar vi med att lägga till en liten bit i vår HTML:
Som du kan se, kastade jag i princip två stycken, var och en med en unik klass som gör dem lätta att rikta in (du kan använda vissa pseudo-selektörer istället om du verkligen vill få det).
Standardparametrar
Hoppa nu över till din CSS och vi stalar styckena. För att starta vill vi fokusera på de stilar som båda styckena delar. Styling på en gång om möjligt hjälper till att hålla vår kod ren och mindre överflödig. Här är en stor bit av kod för att tänka över:
Nu är det här mycket att kasta på dig på en gång så jag går igenom det steg för steg. Det första vi gör är att ge styckena form, färg och typ stilar precis som vi gjorde på knappen. Huvudskillnaden är att dessa är mindre och använda några marginaler för att driva dem på plats.
Nästa är positioneringsstilarna. Dessa är mycket viktiga så var noga med att du förstår dem tydligt. För att få vingarna att visas bakom knappen måste vi tillämpa z-index, vilket påverkar elementets staplingsordning. Tänk på detta som en? Skicka till rygg? typ av kommando. För att göra detta arbete måste vi tillämpa absolut positionering.
Slutligen lade vi till samma gränslinjer och gradientstilar som vi gjorde tidigare. Jag har hållit dessa separerade från tidigare stilar för att hålla sakerna enkla och tydliga, men för att göra saker DRYER, skulle du förmodligen vilja skriva om dina delade CSS3-stilar till något sådant:
I grund och botten, när du befinner dig själv upprepar eller klistrar stilar flera gånger, gör du din kod onödigt komplicerad och bör försöka förenkla.
I slutet av det här steget ser du konstigt ingen ändring i förhandsvisningen från förra gången. Detta beror på att vi har gömt dessa element bakom knappen. De är där, du kan bara inte se dem än!
Höger och aktiva stilar
Vad vi vill göra är att ta vingarna som vi just skapat och flytta dem utåt när användaren svävar över knappen. För att uppnå detta behöver vi helt enkelt justera marginalerna på varje stycke. Här är vi riktade mot var och en av de klasser som vi skapade, flytta sedan upp och uppåt. Den övre klassen krävde också en liten linjehöjdsjustering för att se rätt ut.
Medan vi är här kan vi lika bra slänga några aktiva stilar också. Dessa kommer att träda i kraft under en mus ner händelse.
Som jag kan se är det jag gjort här justera lutningen så att toppfärgen sträcker sig lite längre, då tog jag tillbaka vingarna så att det finns en kontraherande effekt när du klickar.
Nu ser vår knapp fantastisk ut. Alla tre av våra stater arbetar. När du inte svävar ser det ut som en vanlig gammal knapp. När du svävar, springer vingarna eller lådorna ut. När du klickar kommer vingarna lite och gradienten ändras någonsin så lite.
Slutsteg: Lägg till övergången
Vid denna tid verkar allting fungera bra. Det enda problemet är att svängningseffekten sker omedelbart och vi vill naturligtvis att det blir lite mer gradvis. För att åstadkomma detta, gå tillbaka till ditt stycke block och lägg till en grundläggande 0,5 sekund övergång med alla nödvändiga prefix.
Med detta tillägg övergår knappen mycket snyggt mellan de tre olika tillstånden.
Se den i aktion
Vi är alla färdiga! Du borde nu ha en fantastisk animerad CSS-nedladdningsknapp som säkert kommer att imponera. Kolla in live-demo nedan eller kolla koden på Tinkerbin.
demo: Klicka här för att starta
Vill du ha en ännu bättre version av knappen med sex olika versioner att välja mellan? Kolla in den fantastiska gratis nedladdningen på vår nya systerwebbdesign Curate.
Slutsats
Tack för att du läser och följer med. Om du gjorde det hela vägen, klappa dig själv på baksidan för ett bra jobbat jobb.
Jag hoppas du lärde dig en sak eller två om z-index eller coola CSS3-tricks. Om inte, åtminstone har du en fantastisk knapp ur affären! Lämna en kommentar nedan och meddela om du tyckte om handledningen.