In diesem Artikel möchte ich Dir zeigen, wie Du ganz einfach runde Buttons inklusive Klickeffekt mit CSS3 erstellen kannst. Was mit Javascript verhältnismäßig aufwendig war, ist mit Hilfe von CSS nun ein Kinderspiel. Ein kleines Beispiel kannst Du Dir in dieser Demo anschauen. Viel Spaß mit diesem kleinen Webdesign-Tutorial!

Der Code

Im Grunde ist es ganz einfach. Wir definieren eine Klasse mit einem beliebigen Namen und weisen ihr bestimmte Eigenschaften zu. Folgendes:

HTML

CSS

Beispiel

Beispiel anzeigen

[mt10]
[mt10]

Ich wünsche Dir viel Spaß beim Erstellen Deiner eigenen CSS3-Buttons!

Schreibe einen Kommentar

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

2 Kommentare zu “Runde Buttons mit CSS3

  1. Form und Farben gefallen mir sehr gut.
    Ist es auch möglich diese zu beschriften (Text im Button)?

    1. Daniele sagt:

      Natürlich! 🙂 In dem Fall kannst Du ganz gemütlich Text in den button-Tag platzieren:

      Viele Grüße,
      Daniele