Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » CSS » 42 CSS Buttons mit Hover-Effekt & Code Snippets

42 CSS Buttons mit Hover-Effekt & Code Snippets

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn du an eine umfassende Browser-Kompatibilität denkst. Wie gut, dass es fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir heute die besten Beispiele auch gleich in diesem Beitrag präsentieren.

Sozial sein
Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
Lesedauer: 8 Minuten
  • von Markus Seyfferth
  • 23. Mai 2022

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

https://www.drweb.de/wp-content/uploads/2021/04/button-building.mp4

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:

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

Symbol - Logo
Ob zum schnellen Testen oder in der Produktion: Mit der Knopf-CSS-Bibliothek lassen sich verschiedene Buttons im Nu einbetten.

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

Link zur auf Codepen.io

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

Marke - Produktdesign
Wenn CSS-Buttons täuschend echt aussehen. Link zu Codepen. Screenshot: Dr. Web. Kreiert von halvves.com

Neumorphische CSS-Toggle-Buttons

Logo - Marke
Link zu Codepen. Screenshot: Dr. Web. Erschaffen von halvves.com

Allgemeine Call-to-Action Buttons

Gradient Text Overlay Button

Link zur Demo auf Codepen.io

Ein Pen von Sarah Fossheim.

Click me!

Link zur Demo auf CodePen.

Click me! (2)

Link zur Demo auf CodePen.

Liquid Fill

Link zur Demo auf CodePen

Some Text

Link zur Demo auf CodePen.

Smash to Submit Button

Mit diesem Button von Aaron Iker muss man schon echt hart ran, um zum Ziel zu gelangen. Sie schaffen das! 😉 Link zur Demo auf Codepen.io

Mehr erfahren (Learn more)

Link zur Demo auf CodePen.

Learn more (2)

CodePen Embed rZRaNe
Link zur Demo auf Codepen.io

Go!

CodePen Embed rGLxbP
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io
Link zur Demo auf Codepen.io

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.

ghost-buttons-parallax-website
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.

ghost-buttons-createiveadawards-website
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.

ghost-buttons-unionroom-website
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.

ghost-buttons-juvo-website
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.

ghost-buttons-nzk-website
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.

ghost-buttonsalice-website
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.

ghost-brahma-website
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.

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Agenturpartner

Evergreen Media®

Innsbruck

Berlin Translate

Berlin

Orange Services

München

Online Solutions Group

München

YOYABA

Hamburg

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

Was du bei der Übersetzung deiner Website beachten musst

Du betreibst einen Onlineshop oder eine Hotelwebsite und möchtest nun auch in anderen Ländern bekannter werden oder eine andere Zielgruppe ansprechen?

 →   

CSS3: So zentrierst du Elemente richtig

Was soll daran schwierig sein, Elemente in CSS zu zentrieren? So magst du spontan denken. Wenn du dich mit dem Thema jedoch schon öfter befasst hast, weisst du auch, dass Zentrierung manchmal zu einer echten Herausforderung werden kann. Im folgenden Beitrag zeige ich dir fünf Methoden, Elemente und Schriftzüge in HTML mit Hilfe von CSS3 zu zentrieren.

 →   

Elementor für WordPress: Was sind die Vor- und Nachteile?

Elementor ist der führende Pagebuilder für WordPress und kann mehr als 7 Millionen (!) aktive Installationen für sich verbuchen. Ich habe mir den Senkrechtstarter für dich angesehen.

 →   

8 Antworten zu „42 CSS Buttons mit Hover-Effekt & Code Snippets“
— was ist Deine Meinung?

  1. Waldemar Krieg sagt:
    8. März 2021 um 11:59 Uhr

    Sehr informativer Beitrag, vielen Dank

  2. Jan Hartmann sagt:
    27. Februar 2021 um 19:45 Uhr

    Vielen lieben Dank für diese Mega-Buttonsammlung!

  3. Inga-Lena sagt:
    21. Januar 2020 um 21:23 Uhr

    Wirklich tolle Button Kollektion! Erspart mir eines an Zeit bei einigen Projekten, vielen Dank dafür!

  4. Daniel Knoden sagt:
    29. Dezember 2019 um 13:27 Uhr

    Wahnsinns gute Button! 🙂 Danke fürs Teilen!

  5. Klaus sagt:
    26. November 2019 um 22:51 Uhr

    Hallo, jemand eine Idee, wie ich das hinbekomme, dass die CSS nur auf den Hover Button angeand wird und nicht gleich auf die ganze Seite

    1. MarkusSeyfferth sagt:
      26. November 2019 um 22:58 Uhr

      Hallo Klaus, vielleicht hilft Dir ja einer der CSS-Selektoren weiter?

      1. Klaus sagt:
        26. November 2019 um 23:14 Uhr

        Hi Markus,

        nicht so ganz 🙁 – bin auch ehrlich gesagt mit css nicht so fit.

        Also. mit „link“ kann ich die css ja laden, wirkt sich dann aber auf die gesamte Seite aus
        Ich suche aber, wenn überhaupt möglich, eine Lösung, dass die css eben nur auf dem div Auswirkungen hat.

        Hintergrund: Ich nutze ein Content System und will da nur eines der hier vorgestellten Buttons einbauen

  6. Julia B. sagt:
    19. November 2019 um 17:20 Uhr

    WOW, Meeegaaa! Vielen Dank für die Bereitstellung 🙂

    Cheers
    Julia

Kommentare sind geschlossen.

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.