CSS3 förändrar helt spelet för att skapa knappar på webben. Tekniker som enbart var möjliga med bilder kan nu enkelt utföras med bara några rader kod. För det här inlägget har vi byggt upp sex attraktiva CSS-knappar för att du ska kopiera och klistra in direkt i dina projekt, noll behörighet krävs.
Som med något bra i CSS3 fungerar knapparna nedan bra i Webkit- och Mozilla-webbläsare, men olika versioner av IE kommer att bli korta.
En snabb anteckning om semantik
Exemplen nedan är lite tunga på HTML-markup och många av dem kan enkelt bli smidigare. Jag strukturerat dem så att jag kunde hålla CSS snygg och åtskilda för olika delar av knappen. Det här är så att du kan mixa och matcha olika delar av vart och ett av exemplen nedan. Om du implementerar någon av dessa, se till att titta på både CSS och HTML för att se om du kan trimma något fett.
Avrundad knapp: två linjer
Ibland skär inte en enda textrad bara den. Använd den här knappen när du har mycket att säga och vill klämma in det i ett litet utrymme. För styling använde jag en gradient från # 99CF00 till # 6DB700 och några enkla gränser.
html
CSS
Röd piller
Den här enkla men attraktiva röda knappen använder starkt rundade hörn för att ge den en pillerliknande form. Du hittar en bakgrundsgradient från # d46d45 till # b1432a och några små gränseffekter på toppen och botten. Återigen är svängningseffekten helt enkelt en invers effekt.
html
CSS
Mörkt Letterpress
Här använde jag en bokstäverteknik för att få ett inslag i texten. I grund och botten allt du gör är att göra texten mörkare än bakgrunden och sedan ge den en ljus skugga. För svängningseffekten lättade jag bara upp färgerna lite.
html
CSS
Svart skönhet
För den här knappen ville jag verkligen skapa något smidigt och stiligt. För att uppnå detta genomförde jag tre knep. Först tillämpade jag några stoppade gradienter för att ge det det glansiga utseendet. Därefter applicerade jag en inre skugga, vilket är ett bra knep för att lägga till djup och belysningseffekter. Slutligen tillämpade jag en liten glöd genom att använda en textskugga.På svävaren minskar jag glödet och intensifierar skuggan.
html
CSS
Blåpiller med ikon
Den blå pilknappen kombinerar de blanka stylingarna i den föregående knappen med formen av det röda piller från ovan. Återigen använde jag några glänsande gradienter och i inre skugga, men för att göra saker intressanta lade jag till en ikon: en liten penna. Den stora saken med den här ikonen är att det inte kräver några speciella typsnitt, bara HTML! Det är ett snyggt litet tillägg som verkligen kan jazz upp en kontaktknapp med nollansträngning.
html
CSS
Gilla / gillar inte Knappar
Här skapade jag två cirkulära knappar avsedda att implementera ett enkelt klassificeringssystem. Den gröna knappen betyder en positiv omröstning och den röda en negativ röst. Som med den sista knappen, är ikonerna här rent HTML och kräver inga @ font-face-tricks.
html
CSS
Slutsats
Jag hoppas att dessa knappar är användbara för dig. Även om webbläsarbegränsningar gör att vissa av dessa inte är rätt implementerade, erbjuder de fortfarande bra inlärningsexempel för några av de fantastiska nya funktionerna i CSS3.
Lämna en kommentar och låt oss veta vad du tycker!