Idag ska vi ta ett steg tillbaka från avancerade diskussioner om CSS preprocessorer och återgå till några bra gamla grunder. Vi ska arbeta upp fyra super enkla CSS-knappar, var och en med en unik animerad svängningseffekt.
Följ med mig och skapa dina egna roliga knappstilar. Gärna också ta min kod och använd den på dina projekt. Om du är en CSS nybörjare som letar efter ett bra sätt att göra dina knappar mer intressanta, är den här artikeln för dig!
Vad vi bygger
Jag har kastat alla knappar i en demo så att du kan få en snabb titt på allt vi ska gå över idag. Klicka på länken nedan för att kolla in dem!
demo: Klicka här för att starta.
Globala inställningar
Innan vi börjar på de enskilda knapparna, här är några globala inställningar som jag har tillämpat på alla exemplen.
html
För experimenteringsändamål använder jag bara en enkel länk och styler den som ett blockelement. Jag får alltid några otäcka kommentarer om denna teknik, om du vill använda en inmatning, var min gäst!
CSS
För CSS ställde jag helt enkelt in teckensnittet till Helvetica, såg till att texten var vit och stängde av alla standardtextdekorationer (understreckningar) för länkarna.
Växande knapp
Vårt första knapp experiment är en av mina favoriter. Även om vi förmodligen alltid förväntar oss någon form av svängningseffekt när vi mus över en länk eller knapp på webben, förväntar vi vanligtvis något ganska subtilt så att den här kommer med en trevlig överraskning: det ändrar sin form!
Grundtanken är att du har en enkel knapp med ett meddelande, i vårt exempel vi använder? Registrera dig nu.? När du sveper över knappen växer den horisontellt för att avslöja en del av meddelandet som ursprungligen dolde. Låt oss se hur det här fungerar.
Grundläggande CSS
För att börja, behöver vi bara ge vår knapp en grundläggande form och färg. Här ställde jag höjden till 28px och bredden till 115px, lagt till några marginaler och vaddering, och gav knappen en liten gräns.
Fancy CSS3
Vissa människor blir glada när du använder för mycket CSS på en enkel knapp. Av denna anledning skiljer jag ut de långa CSS3-stilar som jag ska använda. Stilarna i det här avsnittet är helt frivilliga och gör att knappen blir mer modern och cool.
Jag började med en grundläggande 15-sidig radie för att ge oss några fina avrundade hörn och sedan lagt till en liten gradientöverlagring. Graderingen börjar på transparent och bleknar till svart. Detta är ett litet knep jag använder för att applicera en snabb mörkningsgradient som fungerar med praktiskt taget vilken bakgrundsfärg som helst.
Animation CSS
Nu är det dags att ställa in vår CSS-övergång. Det här är ganska enkelt, det mest irriterande är att vi, liksom ovan, måste upprepa så många dang gånger! Här har jag satt animationen för att påverka alla ändringar, varaktigheten till en halv sekund och tidsfunktionen för att underlätta.
Höger CSS
För att avsluta det är allt vi behöver göra att lägga till en svängstil som expanderar bredden. Jag mätt ut 200px som en tillräcklig bredd för att visa den dolda texten. Nu svävar över knappen ger dig en fin jämn animering som avslöjar ett dolt meddelande!
Enkel färgskiftning
Detta är det enklaste av alla CSS-knapp animationer. Det är så enkelt att jag tvekade att inkludera den, men för att det är ett populärt alternativ, trodde jag att jag skulle kasta in. Vad som händer här är att du har en bakgrundsfärg som ändras på svävar, men vi använder en övergång som den ovan för att gradvis skift färgen istället för att förändringen ska vara omedelbar.
Grundläggande CSS
CSS är mycket lik sista gången med några anmärkningsvärda förändringar. Jag har lagt till i en annan bakgrundsfärg och ändrat formen lite. Jag har också mitt i linje med texten och ställt linjehöjden till den vertikala höjden på knappen för att centrera den.
Fancy CSS3
Återigen har vi några helt frivilliga visuella stilar. Jag har satt lite mindre av en radie som går runt, tillämpade en liknande bakgrundsgradient och lagt till tilläggsdelen av en boxskugga. Med hjälp av rgba med skuggan satte jag den till svart och minskar sedan genomskinligheten.
Animation CSS
Vi kan ganska mycket använda exakt samma övergångsinställning som vi använde i föregående exempel:
Höger CSS
För att avsluta det, använd helt enkelt en annan bakgrundsfärg på svävaren. Prova att välja en något ljusare variant av färgen i Photoshop så övergången ser bra ut. Kolla även på 0to255.com för ett bra verktyg som hjälper dig att fånga färgvariationer.
Bakgrunds bildsändning
Den här är väldigt intressant och kan ha dramatiskt olika resultat baserat på ditt urval av bakgrundsbild. Jag använder ett mycket subtilt mönster, så effekten blir ganska subtil. Försök använda något djärvare för ett mer krävande slutresultat.
Här är kärnan: du applicerar en bakgrundsbild till knappen och flyttar sedan bakgrundens position på svävaren. Kasta i en övergång och du får en trevlig rullningseffekt.
Grundläggande CSS
För det mesta är det här som i föregående exempel. Observera dock att vi nu har en bakgrundsbild tillämpad (detta kommer att upprepas som standard). Jag har ställt in den ursprungliga bakgrundspositionen till? 0 0? bara så att du kan få en uppfattning om hur det här ska fungera. När vi ställer in svängarna senare kommer vi helt enkelt att flytta denna position vertikalt.
Fancy CSS
Det är inget speciellt här som vi inte redan har gått över, bara några rundade hörn och en skugga.
Animation CSS
Återigen använder vi samma utdrag för vår animering. Den här gången uppförde jag varaktigheten till 0,8 sekunder så att den varar en liten bit längre.
Höger CSS
Nu är det dags att flytta den bakre positionen. Kom ihåg att vi började på? 0 0 ?. Nu ska vi flytta bilden vertikalt genom att ställa in det andra numret till 150px. Om vi ville flytta den horisontella positionen skulle vi ändra det första numret.
3D-tryckknapp
För vårt sista trick kommer vi att efterlikna en populär 3D-knappdesign som ser ut som om den trycks ner när du svävar över den. Denna animering är så enkel att vi inte ens behöver några CSS-övergångar, men slutprodukten är fortfarande en ganska fin, om än direkt animering.
Grundläggande CSS
Här är den grundläggande CSS för vår sista knapp. Observera att både det här och det sista exemplet använder subtila textskuggor för att hjälpa texten att sticka ut lite mer.
Fancy CSS
Den här gången är den fina CSS inte valfri. Om du vill uppnå denna effekt behöver du åtminstone skuggan och gradienten. Den hårda skuggan är vad som ger knappen den falska 3D-effekten. Det är inte den mest övertygande illusionen någonsin, men det gör fortfarande en snygg utseende.
Höger CSS
Detta är vår största bit av hover CSS än. I grund och botten reducerar vi längden på skuggan och kompenserar den omvandlingen med en marginal. Detta ger en illusion om att knappen trycks ned. Att svänga lutningen runt hjälper också illusionen.
Slutsats
Efter att ha läst igenom denna korta handledning borde du ha ett expertgrepp om hur man implementerar grundläggande CSS3-stilar för att få en knapp att se snygg och attraktiv ut. Du bör också ha en anständig förståelse för hur CSS-övergångar fungerar och vad som krävs för att göra dem kompatibla med webbläsaren. Slutligen bör du ha några fantastiska idéer för att skapa svåra svängareffekter.
Lämna en kommentar och låt mig veta vad du tycker. Har du använt liknande effekter tidigare? Hur skulle du ändra eller förbättra dessa exempel?