42 CSS Buttons mit Hover-Effekt & Code Snippets

Das <button> Element ist für die Benutzerinteraktion konzipiert, um Beispielsweise ein Kontaktformular abzusenden, etwas hoch- oder herunterzuladen oder um etwas zu „liken“. Mithilfe von Tastatur, Maus, „Touch“ oder gar per Sprachbefehl kann ein sogenanntes  click Event ausgelöst werden, welches die Interaktion auslöst.

Jeder Browser bringt seine eigenen Standard-Styles für das Button-Element mit sich, so dass sie direkt und ohne Anpassung verwenden werden können.  Im Folgenden wollen wir uns verschiedene Beispiele ansehen, wie du die Buttons noch aufpeppen kannst.

Barrierefreie Buttons

Ein Überblick über die Erstellung barrierefreier Buttons, welche sowohl im Dark Mode als auch im Light Mode funktionieren. Link zum Artikel von Adam Argyle und zum Source Code auf Github.

3D-Button

Josh Comeaus Tutorial featured nicht nur einen richtig schönen Button, auch seine Erklärungen sind einfach zu verstehen und mit einigen interaktiven Elementen versehen.

Hier der 3D-Button mitsamt dem dazugehörigen HTML & CSS:

Push me

Hier das CSS zum 3D-Button

.pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
  }
  .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }
  .edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(
      to left,
      hsl(340deg 100% 16%) 0%,
      hsl(340deg 100% 32%) 8%,
      hsl(340deg 100% 32%) 92%,
      hsl(340deg 100% 16%) 100%
    );
  }
  .front {
    display: block;
    position: relative;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: white;
    background: hsl(345deg 100% 47%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }
  .pushable:hover {
    filter: brightness(110%);
  }
  .pushable:hover .front {
    transform: translateY(-6px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }
  .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }
  .pushable:hover .shadow {
    transform: translateY(4px);
    transition:
      transform
      250ms
      cubic-bezier(.3, .7, .4, 1.5);
  }
  .pushable:active .shadow {
    transform: translateY(1px);
    transition: transform 34ms;
  }
  .pushable:focus:not(:focus-visible) {
    outline: none;
  }

Und hier das HTML zum 3D-Button

<button class="pushable">
  <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front">
    Push me
  </span>
</button>

Knopf

Knopf ist eine CSS-Bibliothek zum einfachen Erstellen verschiedener Schaltflächenstile, die über CSS-Variablen an das Design Deiner Marke angepasst werden können.

Papierflugzeug-Button

Der “Paperplane“-Button von Aaron Ikers Stift faltet sich zusammen und fliegt mit ein wenig Hilfe von Greensock-JS sehr hübsch davon.

Neumorphische CSS-Radio-Buttons

Neumorphische CSS-Toggle-Buttons

Allgemeine Call-to-Action Buttons

Gradient Text Overlay Button

Ein Pen von Sarah Fossheim.

Click me!

Click me! (2)

Liquid Fill

Some Text

Smash to Submit Button

Mehr erfahren (Learn more)

Learn more (2)

Go!

Alle Buttons sind für private und kommerzielle Zwecke freigegeben. Da sich Nutzungsbedingungen stets ändern können, solltest du vor der konkreten Verwendung die Lizenz noch einmal überprüfen. Sicher ist sicher.

Minimalistische Ghost CSS Buttons im Trend

Die Zeiten der Gloss- und 3D-Effekte sind – zumindest vorerst – vorbei. Beim Webdesign ist derzeit vor allem Minimalismus angesagt. Das spiegelt sich auch beim Aussehen von Buttons wieder. Sogenannte Ghost-Buttons sind im Kommen und passen perfekt in die zurückhaltende Gestaltung vieler zeitgemäßer Websites, die auf Flat-Design oder Material-Design setzen. Der eigentliche Ghost-Button besteht nur aus einem meist dünnen Rahmen und dem darin stehenden Text. Weniger zurückhaltend lässt sich ein Button kaum gestalten – vorausgesetzt, man soll ihn auch noch als Button erkennen können.

Website der Agentur „Parallax“ mit einfachem Ghost-Button

Einfach gestaltet und ausgezeichnet

Ghost-Buttons sind einfach gestaltet und ebenso einfach und schnell per Stylesheets ausgezeichnet. Bei klassischen Buttons, die per „<button>“- oder „<input>“-Element ausgezeichnet werden, reicht es im Grunde aus, eine Rahmenfarbe zu setzen und den Hintergrund zu entfernen. Standardmäßig sind diese Elemente nämlich immer mit einer Hintergrundfarbe ausgestattet.

input {
  background: none;
  border: 1px solid black;
  color: black;
}

Nicht immer ist ein Button durch ein entsprechendes Button-Element ausgezeichnet. Oft verbergen sich dahinter auch Links, die per „<a>“-Element ausgezeichnet sind. Hier ist die Gestaltung ebenso einfach. Optisch unterscheiden sich echte Buttons von einfachen Links dann nicht mehr.

Auf den Hintergrund kommt es an

Minimalismus alleine ist kein Garant für eine gut gestaltete Website. Das gilt auch für Ghost-Buttons. Das Umfeld muss passen, damit Ghost-Buttons auch elegant wirken und vor allem auch aufgrund ihrer Schlichtheit nicht untergehen.

Da vor allem großformatige Bilder derzeit im Trend sind, lassen sich Ghost-Buttons ausgezeichnet in Kombination mit ausdrucksstarken Hintergrundbildern darstellen.

In den meisten Fällen werden per Ghost-Buttons keine klassischen Button-Funktionen – wie das Versenden eines Formulars – ausgelöst. Meist sind es Links, die besonders hervorgehoben werden sollen. Im Beispiel der beiden Agenturen „Parallax“ und „Creative Ad Awards“ sind es die Links zu Arbeitsproben, die durch Ghost-Buttons dargestellt werden. Präsentiert werden die Buttons auf Bildern, die das Browserfenster (annähernd) ausfüllen.

Website der Agentur „Creative Ad Awards“

Neben großformatigen Bildern sieht man immer häufiger auch formatfüllende Videos als Hintergrund. In Kombination mit diesem Trend wirken Ghost-Buttons ebenfalls sehr eindrucksvoll – vor allem, weil sie aufgrund ihrer Schlichtheit wenig Platz brauchen und dem Video wenig Sichtbarkeit nehmen. Stehen die Buttons in einem guten Kontrast zum Video, bleiben sie trotz des animierten Hintergrunds gut sichtbar und fallen auf.

Website der Agentur „Union Room“ mit Videohintergrund

Mit Details und Besonderheiten glänzen

Wer auf den Ghost-Button-Trend aufspringen will, sollte zusehen, dass die Buttons trotz ihrer Schlichtheit dennoch etwas Besonderes haben. Gerade bei einem minimalistischen Design ist das immer eine Herausforderung. Daher sollte man sich gut überlegen, wie man den Buttons eine eigene individuelle Note hinzufügen kann. Dank CSS3 sind hier der Kreativität kaum Grenzen gesetzt. Man kann mit abgerundeten Ecken und Transparenzen arbeiten, eine ausdrucksstarke Schriftart verwenden und vor allem mit dezenten Animationen und Transitions aufwarten.

Website der Agentur „Iuvo“ mit animierten Ghost-Buttons

Dabei müssen die Animationen nicht zwingend so aufwendig sein, wie bei der Agentur „Iuvo“. Oft sind dezente Fade-in- und Fade-out-Effekte eleganter. Oder man lässt einfach den Rahmen des Ghost-Buttons animieren – wie auf der Website des Entwicklers Nicolas Zezuka.

Website mit schlichtem animiertem Ghost-Button

Ghost-Buttons nicht beschränkt auf einen Link

Der Einsatz von Ghost-Buttons muss bei weitem nicht darauf beschränkt sein, dass per Klick eine Seite geladen wird. Er kann auch verwendet werden, um die Funktion eines Radio-Buttons zu übernehmen. Die Website der App „Couple“ nutzt Ghost-Buttons, um darüber das Geschlecht auswählen zu können.

Website mit Radio-Ghost-Button

Bei vielen Ghost-Buttons werden per Hover-Effekt Rahmenfarbe und -form verändert oder eine Hintergrundfarbe hinein animiert. Eine Alternative dazu ist, den Buttontext zu animieren. Dieser kann beispielsweise zu einer Seite hin verschwinden. Bei Bedarf lässt sich auch während des Hover-Status ein anderer Text einblenden, um eine Zusatzinformation im Button unterzubringen.

Website mit animiertem Buttontext

Fazit

Richtig in Szene gesetzt, können Ghost-Buttons sehr eindrucksvoll sein. Die Beispiele zeigen, dass vor allem der Hintergrund stimmen muss und kleine Animationseffekte für die individuelle Note sorgen. Je schlichter ein Design ist, desto prägnanter muss es auch sein. Nur so hebt man sich ab und verhindert, im Design-Allerlei unterzugehen.