Tutorial: Coole Buttons mit CSS3

Buttons mit CSS ohne Grafikprogramm selbst gestalten...

Programmierung
Werbung

Farben und Umrandung

background-color: #163EFF;

Damit legen wir eine beliebige Hintergrundfarbe fest. Neben der hexadezimalen Darstellung sind natürlich auch alle anderen in CSS unterstützten Formate möglich.

color: #FFFFFF;

Das ist die Textfarbe, angegeben in hexadezimaler Schreibweise; in unserem Fall handelt es sich um den Klassiker weiß (FF = 255 für alle drei Grundfarben rot, grün, blau).

border: none;
border: 5px solid #FFD858;

Zusätzlich können wir einen Rahmen um den Button legen – oder es natürlich auch sein lassen.

Die Angabe „border: none;“ mag dann überflüssig erscheinen, ist aber notwendig, weil manche Webbrowser ansonsten ungefragt einen Rahmen hinzufügen.

Tipp: Eine Eigenschaft nicht anzugeben, bedeutet in CSS nämlich immer die Nutzung der Standardeinstellung – und die legt jeder Webbrowser für sich selbst fest.

Im zweiten Beispiel zeichnen wir einen 5 Pixel dicken, durchgängigen Rahmen („solid“) in einem schönen Goldorange, damit der Button auffälliger wirkt:

Wissenswertes: Was wohl passieren würde, stünden beide „border“-Angaben in ein und derselben Klassendefinition? Dann wird jeweils die letzte Angabe ausgeführt (hier also ein Rahmen gezeichnet).

Abmessungen

Geben wir die Größe des Buttons nicht an, orientieren sich seine Ausmaße allein an der Aufschrift (plus einem eventuell vorhandenen Innenabstand).

Für ein konsistentes Design sollten Sie immer Breite und Höhe explizit festlegen:

width: 300px;
height: 60px;

Dieser Button ist 300 Pixel breit und 60 Pixel hoch (neben der Angabe in CSS-Pixel können auch andere unterstütze Maßeinheiten benutzt werden).

Wissenswertes: Reicht der Platz für den Text im Button nicht aus… Pech gehabt. Dann hängt der Text über das Ende hinaus. Also besser etwas großzügiger planen und gut testen.

Typographie

Wer seinen Button noch individueller gestalten möchte, kann eigene Formate für die Schrift definieren.

font-family: Courier New,Courier,Monaco;
font-size: 16px;
text-align: center;

„font-family“ bestimmt die Schriftart und „font-size“ die Größe. Mit „text-align“ kann die Position der Aufschrift angepasst werden (z.B. „center“: zentriert, „left“: linksbündig, „rechts“: rechtsbündig).

Werden mehrere Schriftarten angegeben, verwendet der Webbrowser die jeweils erste, die auf dem Computer des Nutzers zu finden ist (oder die Standardschrift des Webbrowsers, sollte keine passen).

Tipp: Textauszeichnungen wie fett und kursiv lassen sich am besten im HTML-Code einfügen (auch wenn das eigentlich nicht mehr üblich ist, es funktioniert und geht schnell), z.B.

<button>Ein <u>sehr</u> <i>auffälliger</i> <b>Button</b></button>

Innenabstände

Der Innenabstand legt den Bereich zwischen Text und Rand des Buttons fest. Es können maximal vier Werte angegeben werden: Oben, rechts, unten, links.

padding: 10px;
padding: 10px 20px;
padding: 10px 20px 5px;
padding: 10px 20px 5px 15px; /* Siehe Beispiel */

Aufgepasst bei der Angabe mehrerer Werte; das ist ein bisschen tricky. Bezogen auf unser Beispiel hätte das Padding folgende Auswirkungen auf den zu zeichnenden Button:

  • 10 px: Fügt jeweils 10 Pixel oben, rechts, unten und links ein.
  • 10 px 20 px: Fügt jeweils 10 Pixel oben und unten sowie 20 Pixel rechts und links ein.
  • 10 px 20 px 5 px: Fügt 10 Pixel oben, jeweils 20 Pixel links und rechts und 5 Pixel unten ein.
  • 10 px 20 px 5 px 15 px: Fügt 10 Pixel oben, 20 Pixel rechts, 5 Pixel unten und 15 Pixel links ein.

Außenabstände

Der Außenabstand legt den Bereich zwischen dem Rand des Buttons und anderen Elementen auf der Seite fest. Auch hier können maximal vier Werte angegeben werden: Oben, rechts, unten, links.

margin: 10px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 20px 5px 15px;

Hinweis: Es gelten die gleichen Regeln für die Angaben wie bei den Innenabständen.

Werbung

Ähnliche Artikel