Tutorial: Coole Buttons mit CSS3

Formgebung

Buttons sind üblicherweise rechteckig. Mithilfe einer simplen CSS-Anweisung lassen sich auch besondere und ausgefallene Formen kreieren.

border-radius: 4px; /* Button 1 */
border-radius: 50%; /* Button 2 */
border-radius: 2px 4px 20px 8px; /* Button 3 */

Unser drittes Beispiel zeigt, wie Sie für jede Ecke eine individuelle Rundung bestimmen. Es sind bis zu vier Werte möglich, die folgendermaßen kombiniert werden können:

• 2px: Der Radius beträgt für alle Ecken 2 Pixel.
• 2px 4px: Die Ecken oben-links und unten-rechts erhalten eine Rundung um 2 Pixel, die Ecken oben-rechts und unten-links jeweils 4 Pixel.
• 2px 4px 20px: Die Ecke oben-links erhält eine Rundung um 2 Pixel, die Ecken oben-rechts und unten-links 4 Pixel und die Ecke unten-rechts 20 Pixel.
• 2px 4px 20px 8px: Oben-links, oben-rechts, unten-rechts und unten-links (wir drehen uns sozusagen einmal im Uhrzeigersinn).

Buttons horizontal/vertikal anordnen

Das Erzeugen einer Menüzeile bzw. eine Toolbar gelingt mit dieser CSS-Aweisung:

float: left;

Unser Beispiel setzt noch einen kleinen Außenabstand („margin: 0px 0px 5px 0px“) von jeweils 5 Pixel für eine schönere Darstellung.

Tipp: Damit nachfolgende Elemente nicht neben den Buttons, sondern darunter angezeigt werden, sollten Sie die Buttons in eine div-Box einbetten. Dies könnte in HTML beispielsweise so aussehen:

<div style="display: inline-block; width: 100%;">
<button class="ofa_button">Button 1</button>
<button class="ofa_button">Button 2</button>
<button class="ofa_button">Button 3</button>
</div>

Was nebeneinander funktioniert, ist natürlich via CSS auch in vertikaler Ausrichtung möglich:

display: block;

Button 1Button 2Button 3

Das waren die Basics…

In diesem Artikel haben wir Ihnen gezeigt, wie einfach es sein kann, graphisch ansprechende Buttons mit CSS3 zu erstellen. Und jetzt sind Sie an der Reihe… gestalten Sie individuelle Buttons für Ihre Website!

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

---

Autor: Tobias Eichner | Datum der Veröffentlichung: September 2017
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!