Tutorial: Coole Buttons mit CSS3

Buttons mit CSS ohne Grafikprogramm selbst gestalten...

Programmierung
Werbung
Mit Cascading Style Sheets (CSS) können Sie das Layout von Webseiten gestalten. Damit lassen sich individuelle Designs (z.B. Farben, Typografie, Effekte) frei nach Wunsch bestimmen.
Mit Cascading Style Sheets (CSS) können Sie das Layout von Webseiten gestalten. Damit lassen sich individuelle Designs (z.B. Farben, Typografie, Effekte) frei nach Wunsch bestimmen.

CSS (Cascading Style Sheets) bietet viele Möglichkeiten, auf die Schnelle wirklich coole und aufwändig wirkende Buttons zu zaubern. Und zwar ganz ohne auch nur eine einzige Grafik dafür einbinden zu müssen.

Die Vorteile eines CSS-Buttons liegen auf der Hand: Kurze Ladezeiten und die Möglichkeit, jederzeit unkompliziert Änderungen vornehmen zu können, sprechen für sich.

Schauen wir uns also an, wie man mit ein wenig CSS tolle Buttons erstellen kann.

Der CSS-Button – das Grundgerüst

Ein Standard-Button lässt sich unter HTML einfach erzeugen:

<button>Das ist ein Button</button>

Doch der Button tut nichts. Erst mit einem „a“-Tag hauchen wir ihm Leben ein:

<a href="https://www.tobiaseichner.com/" target="_blank">
<button>Klick mich bitte an!</button></a>

Immer noch nicht wirklich spektakulär, aber ein guter Anfang.

Nun erstellen wir in unserem Stylesheet eine neue Klasse „ofa_button“:

.ofa_button
    {
    background-color: #163EFF; /* Hintergrundfarbe */
    color: #FFFFFF; /* Textfarbe */
    border: none; /* Rahmen */
    padding: 10px; /* Innenabstand */
    text-align: center; /* Ausrichtung Text */
    font-size: 16px; /* Schriftgröße */
    }

Tipp: Alternativ kann man das CSS auch an jeder beliebigen Stelle im HTML-Quelltext unterbringen. Betten Sie die CSS-Anweisungen dafür in ein „style“-Tag ein:

<style>
.ofa_button
    {
    background-color: #163EFF; /* Hintergrundfarbe */
    color: #FFFFFF; /* Textfarbe */
    border: none; /* Rahmen */
    padding: 10px; /* Innenabstand */
    text-align: center; /* Ausrichtung Text */
    font-size: 16px; /* Schriftgröße */
    }
</style>

Und weisen diese Klasse anschließend dem Button zu:

<button class="ofa_button">Das ist ein cooler Button</button>

Na, das ist nicht Nichts, das ist schon was! 🙂

Der Button sieht professionell aus, ist gerade mal etwas größer als 300 Byte und kann jederzeit geändert werden. Das kriegen Sie mit keinem Grafikprogramm der Welt hin.

Download: Button-Grundgerüst zum Experimentieren (HTML)

Jetzt sehen wir uns die einzelnen Elemente im CSS-Code genauer an und entdecken, welche Möglichkeiten der individuellen Gestaltung es außerdem gibt.

Werbung

Ähnliche Artikel