1 Kommentar CSS3 Buttons erstellen
Neue Technologien zu erlernen ist für Webdesigner sehr wichtig. Da wir bei kreativr auch stets mit den neuesten Standards arbeiten, möchten wir euch hier zeigen wie man einen hochwertigen CSS3 Button erstellt – ganz ohne Grafiken. Das Ziel:
CSS3 Button
Das Markup
Wir beginnen zunächst mit einem simplen Markup. Dazu benutzen wir hier einen Anker, dem wir die Klasse class="custom_btn" geben. Unser Ziel ist es aber eine allgemeine Klasse zu definieren, die wir später für alle Buttons wie <submit>, <button> oder <div> benutzen können.
<a class="custom_btn" href="#">Login</a>
Basic-Styles
Nun fügen wir paar grundlegende Styles zur Klasse hinzu, damit unser Link wie ein Button ausschaut. Dazu definieren wir zunächst background-color, border, display und für eine bessere Typo font.
background-color: #ccc; border: 2px solid #aaa; color: #111; font: bold 1em/1.4em Helvetica, Geneva, Arial, sans-serif; padding: 6px 10px; text-align: center;
CSS3 – Radien
Bislang sehen die Buttons aber noch furchtbar aus. Deswegen wollen wir dem Ganzen ein zeitgemäßes Erscheinungsbild mit CSS3 geben. Dazu runden wir die Ecken ab. Das können wir einfach mit -moz-border-radius/-webkit-border-radius/-border-radius machen.
Syntax:
-moz-border-radius: <größe>; /* Für Mozilla-Browser wie Firefox */ -webkit-border-radius: <größe>; /* Für Webkit-Browser wie Chrome oder Safari */ border-radius: <größe>; /* Für Browser wie IE9 oder Opera*/
Wir benutzen als Radius 10px.
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
Das sieht dann so aus:
Abgerundete Ecken
CSS3 – Verläufe
Danach fügen wir dem Hintergrund einen linearen Verlauf hinzu. Das machen wir über sogenannten CSS3 Gradients. Hier stehen uns -moz-linear-gradient/-webkit-gradient zur Verfügung, die wir für die Eigenschaft background-image als Wert eintragen.
Syntax:
-moz-linear-gradient([<stelle>||<winkel>,]? <stop>, <stop> [, <stop>]*) /* Firefox */ -webkit-gradient(<typ>, <stelle> [,<radius>]?, <stelle> [,<radius>]? [,stop ]*) /* Chrome, Safari */
Wir nehmen einen linearen Verlauf von #ccc nach #e6e6e6.
background-image: -moz-linear-gradient(0% 100% 90deg,#CCCCCC, #E6E6E6); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E6E6E6), to(#CCCCCC));
Unser Button mit Verlauf:
Verlauf
CSS3 – Box Shadow
Um (innere) Schatten zu generieren benutzen wir die CSS3 Eigenschaft -moz-box-shadow/-webkit-box-shadow/box-shadow.
Syntax:
-moz-box-shadow: <x_versatz> <y_versatz> <blur_radius> <color> /* Firefox */ -webkit-box-shadow: <x_versatz> <y_versatz> <blur_radius> <color> /* Safari, Chrome */ box-shadow: <x_versatz> <y_versatz> <blur_radius> <color> /* IE9+ */
Die box-shadow Eigenschaft kann überlagert werden, indem man eine weitere Anweisung durch ein Komma anhängt. Mit inset kann der Schatten nach innen gerichtet werden. Somit entstehen ganz einfach Inner Shadows die wir aus Photoshop etc. kennen.
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2), 0 -1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(255, 255, 255, 0.9) inset; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2), 0 -1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(255, 255, 255, 0.9) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2), 0 -1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(255, 255, 255, 0.9) inset;
Schatten
CSS3 – Text Shadow
Jetzt widmen wir uns der Typo und geben der Schrift einen Schlagschatten. Die CSS3 Eigenschaft hierfür ist text-shadow.
Syntax:
text-shadow: <x_versatz> <y_versatz> <blur_radius> <color>;
Wir wollen unserer Typo einen weißen senkrechten Schlagschatten geben. Dazu müssen wir nur den y-Versatz um 1px versetzen und für color #fff angeben.
text-shadow: 0 1px 0 #fff;
Die Typo ändert sich:
text-shadow: 0 1px 0 #fff;
Usability
Um die Benutzerfreundlichkeit des Buttons zu steigern, können wir diesem statischen Button über die Pseudo-Klassen :hover und :active dem Nutzer eine Rückkoppelung geben lassen.
Der fertige Button sieht dann wie folgt aus:
Hover mich:
Browser Unterstützung
Hier könnt ihr nachschauen, welche CSS3 Eigenschaften von welchen Browsern unterstützt werden.
| Firefox | Safari | Chrome | IE | |
| Radien | 3.0+ | 3.2+ | 3.0+ | 9.0+ |
| Verläufe | 3.6+ | 4.0+ | 5.0+ | noch nicht |
| Box Shadow | 3.2+ | 3.5+ | 3.0+ | 9.0+ |
| Textschatten | 3.5+ | 3.2+ | 3.0+ | noch nicht |
Kompletter Code
Zum Auswählen einfach in das Code-Feld doppelklicken.
.custom_btn {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -1px 1px rgba(255, 255, 255, 0.4) inset,0 1px 1px rgba(255, 255, 255, 0.9) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -1px 1px rgba(255, 255, 255, 0.4) inset,0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -1px 1px rgba(255, 255, 255, 0.4) inset,0 1px 1px rgba(255, 255, 255, 0.9) inset;
background-image: -moz-linear-gradient(0% 100% 90deg,#CCCCCC, #E6E6E6);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E6E6E6), to(#CCCCCC));
border: 2px solid #aaaaaa;
color: #111111;
font: bold 1.2em/1.4em Helvetica,Geneva,Arial,sans-serif;
padding: 6px 10px;
text-align: center;
text-shadow: 0 1px 0 #fff;
/* Styles, damit der Button mittig angezeigt wird. Kann entfernt werden. */
margin: 0pt auto;
display: block;
width: 100px;
}
.custom_btn:hover {
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5),0 -1px 1px rgba(255, 255, 255, 0.4) inset,0 1px 1px rgba(255, 255, 255, 0.9) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5 ),0 -1px 1px rgba(255, 255, 255, 0.4) inset,0 1px 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5 ),0 -1px 1px rgba(255, 255, 255, 0.4) inset,0 1px 1px rgba(255, 255, 255, 0.9) inset;
-webkit-transition: -webkit-box-shadow .3s ease-in-out;
-moz-transition: -moz-box-shadow .3s ease-in-out;
}
.custom_btn:active {
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -1px 1px rgba(200, 200, 200, 0.2) inset,0 1px 1px rgba(200, 200, 200, 0.2) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -1px 1px rgba(200, 200, 200, 0.2) inset,0 1px 1px rgba(200, 200, 200, 0.2) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -1px 1px rgba(200, 200, 200, 0.2) inset,0 1px 1px rgba(200, 200, 200, 0.2) inset;
}
Postet ruhig eure Ergebnisse!
Viel Spaß!
It’s a great post, you really are a good writer! I’m so glad someone like you have the time, efforts and dedication writing, for this kind of article… Helpful, And Useful.. Very nice post!