Snygga CSS3 Knappar
23 maj 2011, och än finns det inga kommentarer. Inlägget postades i webbdesign.
Ofta använder man bilder när man ska göra knappar till sin sida, vilket är ett snyggt men lite mindre flexibelt och smidigt sätt att lösa detta på. Med hjälp av CSS3 kan man nu göra oerhört adaptiva, snygga och enkla knappar med väldigt lite kod. Fast färg, gradients, border-image’s, text-shadows osv. på ett mycket smidigt och enkelt sätt som dessutom degraderar till icke CSS3 kompatibla läsare väldigt bra; Det är vad den här artikeln handlar om!
Det hela är mycket enkelt. Vi använder ett ankare som knappens ‘hem’ för att få så semantisk HTML som möjligt. Den får sedan upp till 3 klasser; en som styr färg, en som styr storlek och sen själva knappgrunden. Som jag skrev innan så är det väldigt enkelt att ge knappen ett modern utseende med hjälp av gradients, så jag har inkluderat exempel på både fasta- och gradient-knappar.
HTML
<a href="#" class="large gray button">En kewl mörkgrå knapp!</a> <a href="#" class="medium gray button">En kewl mörkgrå knapp!</a> <a href="#" class="small gray button">En kewl mörkgrå knapp!</a>
Som sagt så styr vi knappen med ett vanligt ankare, resten är självförklarande. Klasserna styr färg och storlek, och texten är just det som ska stå i knappen. Knappens storlek styrs alltså av innehållet. Det är svårt att uppnå med bilder då bilden är just fast. Flexibelt!
CSS
/* Huvudstil */
.button {
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
border-bottom: 1px solid rgba(0,0,0,0.3);
background-color: #454545; /* Fallback */
padding: 5px 10px 6px; /* Fallback */
color: #fff;
text-decoration: none;
font-size: 13px;
font-family: Arial;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
/* Storlekar */
.small.button {
font-size: 12px;
padding: 4px 13px 5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.medium.button {
font-size: 13px;
padding: 5px 15px 6px;
}
.large.button {
font-size: 15px;
padding: 5px 20px 6px;
}
/* Färger */
.gray {
background-color: #565656;
}
.gray:hover {
background-color: #454545;
}
Knappens grund styrs av klassen Button. Här gör vi en fallback, ifall något inte skulle fungera. Storleken styrs av paddingen och textstorleken tillsammans. Vi använder oss av CSS3 egenskaperna border-radius och box-shadow för att skapa de rundade hörnen och skuggan som knappen avger.
Här har jag valt att använda RGBA, Alphakanalen, för att göra att skuggan ska anpassa sig till färg på knappen och färgen bakom knappen. Om vi skulle tagit en fast färg så hade det alltid blivit t ex. svart, men med hjälp av Alphakanalen så kan vi styra transparans i färgen och på så sätt uppnå en mörkare variant av knappens färg.
Storleksklasserna förklarar sig själva, padding styr knappens storlek och font-size styr textens storlek. Laborera lite med olika storlekar och textstilar för att se vad som passar bäst för din site! Även färgerna är väldigt simpla, en färg för oaktivt stadie och en för hover!
CSS
.gblue {
background-color: #349cba; /* Fallback */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, to(#2085af), from(#6ac1e9));
background: -moz-linear-gradient(100% 100% 90deg, #2085af, #6ac1e9);
background: -o-linear-gradient(#6ac1e9, #2085af);
border-bottom: 1px solid rgba(0,0,0,0.40);
}
.gblue:hover {
background-color: #2d8aa4; /* Fallback */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, to(#1e7a9e), from(#61b9e2));
background: -moz-linear-gradient(100% 100% 90deg, #1e7a9e, #61b9e2);
background: -o-linear-gradient(#61b9e2, #1e7a9e);
}
För att göra en gradientknapp så blir det något mer kod. Första raden är en fallback som används om inte läsaren har stöd för bakgrundsgradients. Dem andra raderna är helt enkelt gradients för olika läsare. Gör en snabb sökning på google för att se hur dem olika versionerna fungerar. Likadant här, en oaktiv och en hover variant!
Nu har du allt du behöver för att göra dina egna knappar! Om du behöver ytterligare lite hjälp, eller bara vill se det så kan du här se en livedemo.
