CSS-Buttons erstellen

Die Lösungsbuttons auf meiner Rätselseite bestanden bisher aus einer Grafik. Zum Start meines 13-Wochen-Projekts hatte ich mir letzte Woche vorgenommen, die grafischen Lösungsbuttons durch CSS-Buttons zu ersetzen. Welche Vorteile diese haben und wie ich sie erstellt habe, erfahrt ihr in diesem Artikel.

Vorteile eines CSS-Buttons

CSS-Buttons haben gegenüber der Verwendung von grafischen Buttons 3 wesentliche Vorteile:

• mehr Flexibilität – CSS-Buttons können beliebig beschriftet werden, die Farbe kann einfach angepasst werden, Radien und Farbverläufe können leicht erstellt werden. Auch die Größe eines Buttons lässt sich bequem ändern ohne dass Korrekturen in einem Bildbearbeitungsprogramm vorgenommen werden müssen.
• geringere Ladezeit – Da für die Buttons keine Grafiken benötigt werden, wird nur etwas Code gebraucht. Dadurch wird die Ladezeit verkürzt und die Seite schneller angezeigt.
• bessere Suchmaschinenoptimierung – Da es sich bei der Beschriftung von CSS-Buttons um ganz normalen Text handelt, kann dieser auch von Suchmaschinen gelesen werden. Mit einem Grafikprogramm beschriftete Buttons können dagegen (noch) nicht von Suchmaschinen erkannt werden.

CSS-Button erstellen

Um einen CSS-Button zu erstellen habe ich zuerst im HTML-Tag eine Klasse eingebunden:

<a class="cssbutton" href="test.html">CSS-Button</a>

In der CSS-Datei habe ich die Klasse dann eingetragen:

.cssbutton
{
color:black; /* Schriftfarbe */
font-weight:normal; /* Schriftstil */
padding:10px; /* Innenabstand der Schrift */
width:90px; /* Breite des Buttons */
height:22px; /* Höhe des Buttons */
background:#ccddea; /* Hintergrundfarbe */
}


Das Ergebnis ist ein vollwertiger CSS-Button, der so aussieht:

Der Button funktioniert bereits einwandfrei, sieht aber zugegebenermaßen ein wenig langweilig aus. Deshalb habe ich ihn noch etwas aufgepeppt.

Abrunden des CSS-Buttons

Als erstes habe ich die Ecken des CSS-Buttons abgerundet, ihnen also einen Radius verpasst. Dafür habe ich das CSS-Element „border-radius“ verwendet. Der Radius wird in px angegeben:

border-radius:10px;

Mit dieser Anweisung habe ich alle 4 Ecken des Buttons gleichmäßig abgerundet.

Um einen sichtbaren Rahmen zu erhalten, habe ich diesem noch eine andere Farbe verpasst:

border:solid 0.5px #b8babc;

Das Zwischenergebnis sieht dann so aus:

Das dunklere Blau stammt vom Seitenhintergrund und hat mit dem eigentlichen Button nichts zu tun.

CSS-Button mit Schatten

Nachdem das Abrunden so gut geklappt hat, habe ich dem Button noch einen Schatten spendiert. Dafür habe ich das CSS-Element „box-shadow“ verwendet:

box-shadow:1px 1px 1px 1px #666

Der erste Wert gibt an, wie viele Pixel der Schatten horizontal nach rechts versetzt wird. Der zweite Wert ist der vertikale Versatz des Schattens nach unten. Mit dem dritten Wert wird der Schatten weichgezeichnet und der vierte Wert ist für den Radius. Die einfachste Variante ist es wohl, 4x den gleichen Wert anzugeben. Als letzten Wert habe ich dann noch die Farbe des Schattens angegeben.

Und so sieht der CSS-Button mit Schatten aus:

Das sieht doch schon ganz passabel aus, oder? Aber es geht noch besser.

CSS-Button mit Farbverlauf

Um die Darstellung meines CSS-Buttons noch zu verfeinern, habe ich ihn mit einem leichten Farbverlauf versehen. Das gestaltete sich allerdings nicht ganz so einfach, weil dieses CSS-Element noch nicht von allen Browsern einheitlich unterstützt wird.

Der CSS3-Standard sieht so aus:

background:linear-gradient(left top,#ccddea,#bbd2e3)

Zuerst wird die Richtung des Farbverlaufs angegeben. „left top“ bedeutet, dass der Farbverlauf in der linken oberen Ecke startet und in der rechten unteren Ecke endet. Würde nur „left“ da stehen, ginge der Farbverlauf von links nach rechts, bei „top“ von oben nach unten.

Der Standard wird zur Zeit noch von keinem Browser unterstützt. Deshalb muss bei allen Browsern ein entsprechendes Präfix davor gesetzt werden:

background:-moz-linear-gradient(left top,#ccddea,#bbd2e3); /* Für Firefox */
background:-webkit-linear-gradient(left top,#ccddea,#bbd2e3); /* Für Google Chrome und Safari */
background:-o-linear-gradient(left top,#ccddea,#bbd2e3); /* Für Opera */
background:-ms-linear-gradient(left top,#ccddea,#bbd2e3); /* Für den Internet Explorer ab Version 10 */

Quelle: Norman’s Blog

Der Internet Explorer kann in der momentan aktuellen Version 9 gar keine Farbverläufe darstellen. Deshalb habe ich für diesen eine einheitliche Hintergrundfarbe definiert:

background:#ccddea;

Wichtig ist hierbei die richtige Reihenfolge der Einbindung. Zuerst muss die Hintergrundfarbe für den IE9 definiert werden, danach die browserspezifischen Varianten und zum Schluss der Standard.

Der fertige CSS-Button sieht schließlich so aus:

Und der komplette CSS-Code so:

.cssbutton
{
color:black;
font-weight:normal;
padding:10px;
width:90px;
height:22px;
border:solid 0.5px #b8babc;
border-radius:10px;
box-shadow:1px 1px 1px 1px #666;
background:#ccddea;
background:-moz-linear-gradient(left top,#ccddea,#bbd2e3);
background:-webkit-linear-gradient(left top,#ccddea,#bbd2e3);
background:-o-linear-gradient(left top,#ccddea,#bbd2e3);
background:-ms-linear-gradient(left top,#ccddea,#bbd2e3);
background:linear-gradient(left top,#ccddea,#bbd2e3);
}

Cursor und Hover für den CSS-Button

Wishu hat mich darauf hingewiesen, dass es besser ist, wenn ein Button eine optische Veränderung hat. Damit ist gemeint, dass sich beim Überfahren des Buttons der Mauszeiger und/oder die Buttonfarbe ändert.

Die Änderung des Mauszeigers wird über das CSS-Element „cursor“ vorgenommen:

cursor: pointer; /* verwandelt den Cursor in einen Mauszeiger */

Eine Übersicht über die möglichen Werte gibt es bei selfhtml.

Die Änderung der Buttonfarbe beim Überfahren mit der Maus erreicht man mit dem CSS-Element „hover“:

a.cssbutton:hover {background-color:#eae8cc;}

2. Woche: News-Skript programmieren

Während die erste Aufgabe meines 13-Wochen-Projekts recht einfach zu realisieren war, wird mein 2. Projekt wesentlich arbeitsaufwändiger. Zwar spare ich mir bei dem News-Skript etwas Programmierarbeit, da ich als Vorlage mein bereits existierendes Gästebuch-Skript verwenden kann. Andererseits muss ich aber auch fast 200 News-Einträge in eine Datenbank importieren. Wie ich diese Aufgabe bewältigt habe, erfahrt ihr (hoffentlich) nächste Woche.

Mein 13-Wochen-Projekt
Woche 2: Newsscript programmieren
Woche 3: Werbeseite gestalten
Woche 4: 10 tolle Tipps für Piwik