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

<div class="button"></div>

CSS

/*Definieren der Button-Eigenschaften*/
.button {
    width: 100px;
    height: 100px;
    background-color: #04859D; /*Deine Wunschfarbe des Buttons*/
    border-radius: 50%;
    -webkit-border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 20px 4px #111, inset 0 5px 10px #ddd;
    -moz-box-shadow: 0 0 20px 4px #111, inset 0 5px 10px #ddd;
    -webkit-box-shadow: 0 0 20px 4px #111, inset 0 5px 10px #ddd;
    -o-box-shadow: 0 0 20px 4px #111, inset 0 5px 10px #ddd;
    transition: all 100ms ease;
    -moz-transition: all 100ms ease;
    -webkit-transition: all 100ms ease;
    -o-transition: all 100ms ease;
}
/*Definieren des Hover Zustandes*/
.button:hover {
    -moz-transform: translate(0, -3px);
    -webkit-transform: translate(0, -3px);
    -o-transform: translate(0, -3px);
    transform: translate(0, -3px);
}
/*Definieren des Active Zustandes (Klick)*/
.button:active {
    box-shadow: 0 0 10px 4px #111, inset 0 0px 10px #ddd;
    -moz-box-shadow: 0 0 10px 4px #111, inset 0 0px 10px #ddd;
    -webkit-box-shadow: 0 0 20px 4px #111, inset 0 5px 10px #ddd;
    -o-box-shadow: 0 0 20px 4px #111, inset 0 5px 10px #ddd;
    -moz-transform: scale(.98);
    -webkit-transform: scale(.98);
    -o-transform: scale(.98);
    transform: scale(.98);
}

Beispiel

Beispiel anzeigen

[mt10]
[mt10]

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

Smalltalk-Ecke

Hat Dir der Artikel gefallen oder möchtest Du am Inhalt etwas ergänzen? Hast Du weitere Fragen dazu? Lass uns gerne dazu austauschen. Ich freue mich von Dir zu hören! :)


  1. Philip Richter sagt:

    Hallo und Danke für den wertvollen Artikel! Sehr cooler Blog.

  2. 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:

      Button-Text

      Viele Grüße,
      Daniele

Schreibe einen Kommentar

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

Werde Teil unserer Community

Abonniere unseren kostenlosen Newsletter und wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, die Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.
Kostenloser Newsletter

Bleibe auf dem Laufenden!

Wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.