Button nur mit CSS erstellen

Es ist recht einfach möglich, sich seine eigenen Buttons nur mit CSS zu erstellen. Das bietet einmal den Vorteil, dass man keine zusätzlichen Anfragen beim Laden der Seite benötigt und da keine Bilder verwendet werden, auch weniger Speichergröße von Nöten ist. Zum anderen erleichtert es die Arbeit von Suchmaschinen-Bots, da sie Bilder nur schlecht parsen können. Mit reinem Text gibt es hingegen keine Probleme.

Wie erstelle ich nun einen eigenen Button?

Im HTML-Quellcode, an der Stelle, wo der Button angezeigt werden soll:

<a class="button" href="#">Button</a>

Im CSS schreibt man nun beispielsweise folgendes:

.button {background-color: #000000; color: #FFFFFF; padding: 3px; border-radius: 5px}

Endergebnis

Button

Schon hat man seinen ersten einfachen Button erzeugt. Natürlich kann man ganz nach Belieben andere bzw. weitere CSS Eigenschaften verwenden, wie zum Beispiel Hintergrundverlauf oder Ähnliches.

Weitere formschöne Beispiele seht ihr direkt unter diesen Artikel.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.