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:

Ein CSS-Button in der Grundversion

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:

CSS-Button mit Radius

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:

Ein Schatten für den CSS-Button

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:

Farbverlauf bei einem CSS-Button

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

Veröffentlicht von

Cujo

Die Webmaster-Zentrale wurde im Januar 2010 von mir gegründet. Dabei haben mich 3 Internetauftritte maßgeblich beeinflusst. Zum einen die Website des t3n-Magazins, www.t3n.de, auf der immer sehr interessante Artikel zum Thema Webseitenerstellung gepostet wurden. Genau solche Artikel wollte ich auch schreiben. Dann bin ich schon seit mehreren Jahren im Homepage-Forum, www.homepage-forum.de, aktiv. Im Laufe der Zeit stellte ich fest, dass dort immer die gleichen Fragen gestellt wurden. Jedesmal darauf die gleichen Antworten zu geben, war erstens langweilig, zweitens zeitraubend und drittens hat es sich nicht gelohnt, die Fragen ausführlich zu beantworten. In der Webmaster-Zentrale greife ich jetzt oft Fragen auf, die im Homepage-Forum gestellt wurden und habe die Möglichkeit die angesprochenen Themen viel detaillierter zu behandeln. Bei wiederkehrenden Fragen poste ich dann einen Link zu einem Artikel in der Webmaster-Zentrale. Dadurch erhalten die User ausführlichere Antworten als normalerweise in einem Forum üblich. Die Idee, Informationen bereitzustellen und diese im Forum zu verlinken, habe ich von Daniel, www.homepage-faqs.de, übernommen. Daniel bezeichnet sich selbst als Forenhelfer und ist sehr aktiv im Homepage-Forum. Er hat schon zahllosen Usern mit seinen Informationen geholfen und ihnen die Grundlagen der Webseitenerstellung erklärt. Diese 3 Webauftritte hatten einen so großen Einfluss auf mich, dass ich sicher behaupten kann, dass es ohne sie die Webmaster-Zentrale nicht geben würde.

11 Gedanken zu „CSS-Buttons erstellen“

  1. Wieso hast du denn die Buttons in der Navigation nicht gleich mit überarbeitet? Das wäre doch ein Abwasch gewesen? 😛

    Beim CSS könntest du auch noch ein wenig Code einsparen, indem du z.B. nicht „background-color“ nutzt, sondern einfach „background“. 😉

  2. Ich habe mal mit den Lösungsbuttons angefangen. Neben der Navigation muss ich auch noch andere Buttons umstellen, z. B. bei den Sudokus. Das mache ich bei Gelegenheit 😉

    Mit dem „background“ hast du recht. Das habe ich jetzt abgeändert. Vielen Dank für den Hinweis 🙂

  3. Schöner Artikel. CSS 3 bietet doch einige Möglichkeiten.

    Soweit ich weiß und es auch z.T. selbst schon erlebt habe, unterstützen noch längst nicht alle Browser die vielen Möglichkeiten, die CSS 3 bietet (bzw. man muss, wie man ja in dem Code oben sieht, für jeden Browser einen anderen Code verwenden).

  4. Also ich kann den Farbverlauf im Button nicht sehen, ich hab Firefox 14.0.1.
    Und auch der Hover Effekt funktioniert nicht, obwohl beides normalerweise funktionieren sollte.

  5. Vielen Dank für die tolle Anleitung. Warum gibt es eigentlich nicht ein Tool, dass css Files generieren kann und auch so funktioniert wie es soll? Wie auch immer sehr schöner Post!

  6. Hallo, ich habe dank deiner Anleitung Buttons in meine Webseite integriert. Sehr schön. Vielen Dank.
    Jetzt würde ich gerne den Buttons die gleiche Breite geben – uabhängig vom Text, der drinsteht. Google mich tot und finde nichts.

  7. Vielen Dank für den Beitrag, dadurch konnte ich mir einen verlinkten Button bauen. 🙂

    Allerdings habe ich noch ein Problem mit dem Button, siehe hier: https://links.kremkau.io/info (der Button ist nach den ersten beiden Abschnitten). Der Text scheint „verschwommen“ zu sein.

    Woran liegt das?

    Mein Button-Code sieht sauber aus:

    .cssbutton
    {
    color:white;
    font-weight:normal;
    font-size:20;
    padding:20px;
    text-align: center;
    text-decoration: none;
    border-radius:10px;
    width:20px;
    height:15px;
    background:black;
    margin: 4px 2px;
    cursor: pointer;
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.