Webdesign-Ratgeber
Buttons mit CSS3 gestalten - so geht's
Die Gestaltung von Schaltflächen wurde noch vor einigen Jahren fast komplett mit einem Grafikprogramm abgewickelt. Dank CSS3 ist dies inzwischen ohne zusätzliche Dateien möglich. Unser Ratgeber hilft weiter!
Dieser Workshop zeigt Ihnen, wie Sie Buttons beziehungsweise Schaltflächen ohne weitere Hilfsmittel gestalten können. Zum Einsatz kommen lediglich HTML-Code und CSS3 zur Formatierung. Das erste Beispiel zeigt Ihnen, welche grundsätzlichen Elemente für die Gestaltung einer Schaltfläche zur Verfügung stehen.
Einfache Schaltfläche anlegen
Die Basis für eine Schaltfläche ist ein Text,den Sie im Anschluss mit Hilfe von CSS3 formatieren. Für den Zugriff auf den Text mittels CSS3 verwenden wir ein div-Tag, welches mit den beiden Klassen btn und gruen versehen wird.
<div class="btn gruen">Klick mich</
div>
Im ersten Schritt bekommt der Text das Aussehen einer Schaltfläche. Dazu ziehen Sie als erstes einen Kasten um den Text mit Hilfe der Eigenschaft border und sorgen mit Hilfe von padding für den nötigen Abstand zwischen Text und Rahmen.
.btn {
padding:5px 10px 6px 10px;
border:1px solid rgba(0,0,0,0.4);
}
Die künftige Schaltfläche erhält somit einen Rahmen, wobei dieser nicht direkt nach dem Text endet, sondern am rechten Seitenrand.
Dies regeln Sie durch eine zusätzliche Zeile zu Beginn der Definition von btn. Fügen Sie eine Festlegung für die Eigenschaft display ein und weisen Sie dieser den Wert inline-block zu.
display: inline-block;
Damit endet der umgebende Kasten direkt hinter dem Text "Klick mich" und dem festgelegten Innenabstand. Für eine bessere Sichtbarkeit erhält der Kasten noch eine graue Farbe als Hintergrund. Diesen legen Sie über die Formatierung .gruen an.
.gruen {background-color: #A8A8A8;
color: #000000;}
a8a8a8 ist ein dunkles Grau, für den Text wird entsprechend Schwarz verwendet.
Ecken formatieren
Noch sieht das Ganze nicht wirklich nach einer Schaltfläche aus, sondern mehr nach einem Rahmen um einen Text. Dies ändern Sie im nächsten Schritt mit der Abrundung der Ecken durch den Befehl border-radius. Dieser wird durch die aktuellen Browserversionen unterstützt: Internet Explorer ab Version 9, Firefox ab Version 4, Safari ab Version 5 und die aktuellen Versionen von Chrome und Opera.
In den vorherigen Browserversionen ist der Befehl teilweise noch nicht originär implementiert, weshalb Sie die entsprechenden proprietären Befehle -webkitborder- radius beziehungsweise -mozborder- radius für die Browser mit einer Webkit- beziehungsweise einer Mozilla Engine nutzen sollten.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Der Radius soll jeweils fünf Pixel betragen. Ein erneuter Aufruf der Website zeigt Ihnen den Button anschließend mit abgerundeten Ecken an.
Im Standard setzen Sie für alle vier Ecken den gleichen Wert. Alternativ dazu ist es jedoch auch möglich, jede Ecke individuell festzulegen. Die entsprechenden Eigenschaften lauten
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
Schatten
Mit Hilfe eines leichten Schattens erscheint die Schaltfläche darüber hinaus leicht hervorgehoben. Dadurch erzielen Sie einen Quasi-3D-Effekt. CSS3 sieht für diesen Fall die Eigenschaft boxshadow vor, die insgesamt fünf Parameter besitzt:
box-shadow: h-Schatten v-Schatten Unschaerfe
Ausbreitung Farbe Anschlag
Die einzelnen Parameter haben die folgende Bedeutung:
- h-Schatten: Gibt die Position des horizontalen Schattens an. Kann auch negative Werte haben.
- v-Schatten: Gibt die Position des vertikalen Schattens an. Kann auch negative Werte haben.
- Unschärfe (optional): Gibt an, wie weit die Ränder des Schattens von innen nach außen unscharf dargestellt werden sollen.
- Ausbreitung (optional): Gibt an, wie weit der Schatten über die ursprüngliche Größe hinaus mit einem unscharfen Rand versehen werden soll.
- Farbe (optional): Mit dieser Eigenschaft legen Sie die Farbe des Schattens fest.
- Anschlag (optional): Der Schatten wird von einem äußeren in einen inneren Schatten verwandelt.
box-shadow:10px 10px 5px 5px pink
inset;
Damit haben Sie einen Schatten, welcher 10 Pixel nach oben und rechts verschoben ist und um die Box liegt. Der Unschärfebereich und die Ausbreitung nach außen sind jeweils 5 Pixel. Der Schatten besitzt die Farbe Pink.
Wie auch in den Beispielen zuvor ist box-shadow noch nicht endgültig in allen Browsern angekommen. Aktuell wird die Funktion vom IE ab Version 9, Firefox ab Version 4, Safari ab Version 5.1.1 sowie Chrome und Opera unterstützt.
Für ältere Browser gibt es wie bei borderradius zuvor zwei browserspezifische Implementierungen für Mozilla und Webkit, die in älteren Versionen zum Tragen kommen.
-moz-box-shadow: 0px 0px 2px
rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 2px
rgba(0,0,0,0.5);
Sie können nicht nur den Rahmen mit einem Schatten versehen, diese Möglichkeit steht Ihnen auch für den Text auf der Schaltfläche zur Verfügung. Die Eigenschaft text-shadow besitzt analog zu box-shadow ebenfalls vier Parameter, welche die gleiche Funktion erfüllen.
text-shadow: 1px 1px 1px
rgba(255,255,255,0.5);
Zum Abschluss steht noch die Entscheidung offen, ob Sie den Text fett formatieren oder in der normalen Formatierung belassen. Dies ist vor allem von der gewählten Schriftgröße abhängig - die Beschriftung sollte in jedem Fall gut lesbar sein.
font-weight:bold;
Damit ist die Schaltfläche einsatzbereit und kann verwendet werden.
hover-Ereignis
Abhängig von Ihrem gewählten Design der Website ist es unter Umständen hilfreich, die aktuell markierte Schaltfläche optisch hervorzuheben. In unserem Beispiel ändern wir die Hintergrundfarbe in ein auffälliges Grün, den Mauszeiger in eine Hand und die Schriftfarbe in Weiß.
Berühren Sie mit dem Mauszeiger die Schaltfläche, wird ein hover-Ereignis ausgelöst. Dieses können Sie mit Hilfe von .btn:hover und .gruen:hover abfangen und Ihre Formatierungen anbringen. In unserem Beispiel ordnen wir der Schaltfläche über .btn:hover eine andere Schattenfarbe zu und verändern den Cursor in eine Hand.
.btn:hover {
text-shadow: 1px 1px 1px
rgba(0,0,0,0.5);
cursor:pointer;
}
Im zweiten Schritt sollte noch die Hintergrundfarbe entsprechend angepasst werden. Hierzu werden die Formatierung für .gruen mit dem hover-Ereignis kombiniert und ein grüner Hintergrund und eine weiße Schrift definiert.
.gruen:hover{background-color:
#8aff00; color: #ffffff;}
Größe der Schaltfläche
Die Größe einer Schaltfläche lässt sich über zwei Wege beeinflussen: Entweder Sie verändern den Innenabstand zum Text oder aber die Schriftgröße. Der zweite Fall ist sicherlich der sinnvollere Weg, da eine große Schaltfläche mit kleiner, nicht lesbarer Schrift, wenig Nutzen bringt.
Ratgeber: CSS - Quick Reference Guide
Dies realisieren Sie am einfachsten, indem Sie eine neue Definition einfügen. Für unser Beispiel wollen wir zwei weitere Schaltflächen einführen, die sich auch farblich vom hover-Effekt unterscheiden sollen. Der ersten wird eine gelbe Hintergrundfarbe zugewiesen, der zweiten eine blaue. Die Schriftgrößen sollen entsprechend auf 18 und 36 Pixel gesetzt werden.
.medium {
font-size: 14px;
font-weight: bold;
line-height: 1;
}
Die ursprüngliche Schaltfläche behält ihre Größe von 14 Pixeln und bekommt die Klasse medium zugewiesen. In dieser Klasse wird zusätzlich eine Formatierung mit fett sowie eine Linienhöhe von 1 festgelegt. Letztere legt den Zeilenabstand fest, falls es zu einem Zeilenumbruch kommen sollte. In unserem Fall soll kein zusätzlicher Abstand zwischen den Zeilen hinzukommen.
.large {
font-size: 18px;
font-weight: bold;
line-height: 1;
}
.verylarge {
font-size: 36px;
font-weight: bold;
line-height: 1;
}
Die Festlegungen für large und verylarge unterscheiden sich nur in der Schriftgröße und sind entsprechend 18 und 36 Pixel.
Farben bestimmen
Die Farbmuster für die beiden anderen Schaltflächen werden entsprechend der bereits vorhandenen Vorlage angepasst und mit einem Hexcode für gelb und blau versehen.
Ratgeber: CSS3-Tricks für mobile Geräte
Dieser ist jedoch nur für das hover-Ereignis relevant. Die Definition der Klassen gelb und blau können analog der Klasse gruen gesetzt werden.
.gelb:hover {background-color:
#FFFF00; color: #ffffff;}
.blau:hover {background-color:
#0000FF; color: #ffffff;}
Innerhalb der HTML-Seite ist zum Abschluss nur noch eine Erweiterung der verwendeten Klassen notwendig. So besitzt die blaue Schaltfläche die Klassen btn, blau und verylarge, die gelbe entsprechend btn, gelb und large.
<div class="btn gelb large">Klick
mich</div><br><br><div class="btn blau verylarge">Klick
mich</div><br><br>
Browserüberprüfung
CSS3 kämpft noch mit den gleichen Herausforderungen wie HTML5: Nicht alle aktuell noch genutzten Browserversionen unterstützen den Standard im gewünschten Maße. Aus diesem Grund sollten Sie auf jeden Fall ein Framework zur Validierung der im Browser unterstützten CSS3-Eigenschaften heranziehen.
Sehr gute Unterstützung sowohl für CSS3 als auch für HTML5 bietet das kostenlose Framework Modernizr (www.modernizr.com).
