CSS-knappar: Tutorials och exempel
Skapa knappar med CSS är en av de mest experimenterade - med webbdesigntekniker runt. Exempel och handledning finns i överflöd.
Den största senaste trenden i CSS-knappdesign verkar vara att eliminera bilder, särskilt bakgrundsbilder, från knappar. Men det finns många andra saker som designers gör med knappar, vissa som inkluderar bilder.
Nedan har vi samlat in mer än tjugo handledning, exempel och verktyg för att skapa CSS-knappar, varav de flesta använder CSS3.
Inkluderat är knappar som passar nästan alla designstilar. Vi har försökt att fokusera på nyare tekniker här, lämna ut de långvariga teknikerna (som skjutdörrmetod för att skapa avrundade hörn) som de flesta designers redan känner till.
Om du har andra handledning eller exempel som du vill dela, gör det så i kommentarerna!
Handledning och artiklar
Återupptäcka knappelementet
En väldigt hjälpsam artikel som diskuterar button element i CSS, vilket ofta förbises av designers. Det är lite äldre, men har fortfarande massor av användbar information om att skapa snyggare knappar med CSS.
Vackra CSS-knappar med ikonuppsättning
Här är en annan artikel som talar om hur man skapar knappar med ikoner, men använder span klasser snarare än button element.
Bygga kick-ass praktiska CSS3-knappar
Den här videoprocessen från Nettuts + visar hur man skapar praktiska CSS3-knappar som även innehåller vad som verkar vara en Twitter-ikon för fågelikon, men är faktiskt helt skapad med CSS3.
Vackra Photoshop-liknande knappar med CSS3
Medan knapparna här inte är särskilt framtänkande när det gäller utseende, är det fantastiskt att de skapades helt och hållet med CSS3, utan att använda bilder, och var bara baserade på knappar skapade i Photoshop.
Bättre knapp och navigations interaktioner
Detta är en bra, enkel handledning från Darren Hoyt om att skapa bättre beteenden för dina knappar som uppmuntrar besökare att interagera med din webbplats.
Super fantastiska knappar med CSS3 och RGBA
Denna handledning från Zurb täcker med CSS3 och alfa-blandning med RGBA för att skapa skalbara knappar med endast en enda PNG-bild.
Bygga vackra knappar med CSS-gradienter
En handledning för att bygga en knapp som använder CSS-gradienter som liknar dem som används av Mozilla för Firefox Personas.
Hur man designar en sexig knapp med CSS
Denna handledning visar hur man skapar en stor, levande knapp utan att använda bilder.
Realistiska CSS3-knappar
Dessa är enkla knappar, helt skapade med CSS3, inklusive några pseudo-element.
Pretty CSS3 knappar
Denna handledning visar hur man skapar en enkel knapp i en glansig stil som är skalbar och kan skapas i valfri färg utan bilder.
CSS3-knappar utan några bilder
En enkel handledning för att skapa dynamiska knappar som endast använder CSS3 och inga bilder. Det finns fyra tillstånd för varje knapp, inklusive inaktiverade, svävade och klickade stater.
5 olika handledningar av dynamiska CSS-runda hörnknappsknappar
Detta är en samling av fem olika handledning för att skapa CSS-knappar med rundade hörn. Två inkluderar användningen av bilder, men de andra tre gör det inte.
Skapa en CSS3-knapp som försämras snyggt
Innan alla webbläsare stämmer korrekt med CSS3 kommer vi att stöta på problem när vi använder den för att skapa saker som knappar. Denna handledning visar hur man skapar bra CSS3-knappar som också ser bra ut i äldre webbläsare, som IE6 och 7.
Apples navigationsfält som använder endast CSS
Den här handledningen visar hur man återskapar navigationsmenyn på knappsteg på Apples hemsida. Det fungerar bäst i Safari 3+, men ser fortfarande bra ut i andra webbläsare.
Skapa en CSS3 Call to Action-knapp
Denna handledning visar hur man skapar en anropsknapp helt med CSS som innehåller olika standard- och svängtillstånd.
Sexiga knappar med CSS3
Denna enkla handledning visar hur man skapar snygga knappar med unika svävar och aktiva tillstånd. Knapparna kan skalas och deras färg kan ändras enkelt.
Glänsande knappar utan bilder med endast CSS3
Om man tittar på dessa knappar är det svårt att tro att de är gjorda utan bilder om du inte ser väldigt nära varandra. Koden är komplicerad, men slutresultatet ser bra ut, komplett med svängareffekt.
CSS3-knappar med ikoner
Denna handledning visar hur man skapar CSS3-knappar med gradienter som också innehåller ikonbilder och är kompatibla med webbläsare.
Rulla dina egna Google-knappar
Denna handledning visar hur man gör skalbara knappar i Google-stil med färgade gränser. Slutresultatet är minimalistiskt och rent.
Exempel och verktyg
10 fantastiska CSS3-knappar att använda på din webbplats
Här är en samling av tio knappar som du kan använda på din webbplats. De är alla ganska grundläggande men skapas med bara CSS3 utan bilder.
CSS3-lutningsknappar
Detta är en stor samling CSS3-knappar från Web Designer Wall. Ingår är en mängd olika former, storlekar och färger, alla med gradienter. En av de bästa delarna om dem är dock hur graciöst dessa knappar bryts ner i webbläsare som inte har fullt CSS3-stöd.
Knapptillverkare
CSS-Tricks erbjuder denna gratis CSS3-knapp skapare. Definiera bara bakgrundsfärgerna för varje stat av knappen, storleken och textattributen, och det kommer att skapa CSS-koden för dig.
Radioaktiva knappar
Dessa knappar använder CSS-animationer i Safari för att skapa en pulserande, glödande effekt. I andra webbläsare som stöder CSS3 är de fortfarande helt funktionella och ser bra ut.
Känner du till andra tekniker för att skapa fantastiska CSS-knappar som inte nämns här? Eller har du ett favoritexempel? Vänligen dela dem i kommentarerna!