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.

Pure CSS Gravity Button

See the Pen Pure CSS gravity button (no Firefox yet) by Ana Tudor (@thebabydino) on CodePen.

Erstellt von Ana Tudor.

Teenage Engineering Buttons

See the Pen EP-133 K.O.II Buttons by Nicolas Jesenberger (@nicolasjesenberger) on CodePen.

Erstellt von Nicolas Jesenberger.

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.