Zum Artikel-Inhalt springen
Dr. Web Digital Experts-Logo
  • Kostenloser Grundeintrag
  • Ratgeber
  • Auf Dr. Web werben
  • Mein Konto
  • Jobs
  • Alle Digitalagenturen
  • Berlin
  • Hamburg
  • München
  • Köln
  • Frankfurt
  • Stuttgart
  • Düsseldorf
  • Leipzig
  • Dresden
  • Agentur eintragen →
  • × 🍔 schliessen
  • ☰ Menu

41 CSS-Buttons mit Hover-Effekt und den dazugehörigen Code-Schnippets

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.

Top of the Stack

GeneratePress

GeneratePress ist ein WordPress-Theme, das bekannt ist für seine schlanke und SEO-freundliche und PageSpeed-optimierten Struktur. Mehr erfahren ↗

Elementor

Elementor ist ein Page- & Theme-Builder für WordPress. Mit Elementor kann man individuelle Seiten bauen und Templates anlegen. Mehr erfahren ↗

Sendinblue

Sendinblue ist ein Tool für datenschutz-konforme Marketing-Automation, die viel Zeit spart und die Konversionsraten erhöht. Mehr erfahren ↗

SEOfolgreich

Deine Experten für Local SEO in München. Local SEO richtet sich an lokale Unternehmen, die ihre Sichtbarkeit erhöhen wollen. Mehr erfahren ↗

Anmerkung: Die Ladezeit dieses Beitrags ist aufgrund der vielen Beispiele deutlich höher als bei anderen Seiten. Bitte hab einen Augenblick Geduld, es lohnt sich!

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:

3D-Button CSS

.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;
  }

3D-Button HTML

<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

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

Dazu passt:   Schicke und kostenlose Slider, ganz ohne JavaScript


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

Hübsche CSS-Buttons mit bttn.css

Gefallen Ihnen die aktuellen Ghost-Buttons oder jene im Material Design? Egal welches Flat-Design-Konzept man bevorzugt, das kleine Stylesheet bttn.css hat mit Sicherheit die ein oder andere Schaltfläche parat.

bttn.css: 13 verschiedene Flat-Style-Schaltflächen

Buttons in reinem CSS sind das Mittel der Wahl für moderne Schaltflächen. Das Stylesheet bttn.css macht die Erstellung äußerst ansprechender Knöpfe sehr einfach. Es bedarf nur der Vergabe entsprechend vordefinierter Klassen.

Den folgenden Button

bttn.css

erzeugt man etwa mit den folgenden Klassenzuweisungen:

<button class="bttn-slant bttn-lg bttn-success">large</button>

Wesentlich einfacher wird es nicht. bttn.css kommt mit dreizehn Buttons in sechs Farben und vier Größen. Jeder Parameter wird als zusätzliche Klasse angehängt. Die Farbdefinitionen hätte der Entwickler durchaus sprechender gestalten können. Auf bttn-success für Grün kann man ja noch kommen, aber bttn-royal für Violett oder bttn-warning für Orange erfordert unnötigerweise ein Abstraktionsvermögen, dass auch nicht überall auf der Welt zu den richtigen Assoziationen führen wird. Seis drum, man musst halt die sechs Farbklassen nachlesen, wenn man sie verwenden willst.

bttn.css, geringes Dateigewicht und flexibler Einsatz

bttn.css ist komprimiert noch rund 32kb groß, in lesbarer Form wiegt es 42kb. Wenn Ihnen das für ein paar Buttons zu viel ist, kann man auch das CSS für jeden Button separat herunterladen. So bringen die Buttons etwa 6kb das Stück auf die Waage. In der Regel wird ein Button pro Projekt reichen, wenn man Wert auf eine konsistente Benutzerführung legst.

Sämtliche Parameter kann man bequem zusammenklicken und dann per Zwischenablage in dein Projekt schreiben. Auf der Seite des Konfigurators findest man auch die Download-Möglichkeit für die separaten CSS-Dateien. Zusätzlich zu ihrer modernen Form bringen die Schaltflächen zeitgemäße Animationseffekte mit, die man so auch noch nicht überall findet.

Dazu passt:   42 kostenlose Schriftarten mit deutschen Sonderzeichen

bttn.css

bttn.css wird erstellt und gepflegt von Ganapati Bhat, einem Frontend-Entwickler aus dem indischen Bangalore. Das Projekt steht zur freien Verwendung unter der liberalen MIT-Lizenz auf Github zur Verfügung. Bhat veröffentlichte die initiale Version Anfang November 2016 und ist seitdem aktiv geblieben.

Allgemeine Call-to-Action Buttons

Gradient Text Overlay Button

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! 😉

Mehr erfahren (Learn more)

Link zur Demo auf CodePen.

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.

Markus Seyfferth

Markus Seyfferth

ist seit 2006 aktiv im Thema Medien, Vertrieb und Kundenbindung. Zunächst als studentischer Mitarbeiter einer Berliner Business School, später hauptberuflich als Vertriebsleiter bei einem Start-up der Freien Universität Berlin. Für sechs Jahre übernahm er als Vorstand die geschäftsführende Verantwortung des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte übernommen hat. Seit 2019 verantwortet er die technische und redaktionelle Leitung von Dr. Web und arbeitet für Agenturkunden von Dr. Web Digital.

Neue Agenturen auf Dr. Web

Binary Garden

Hannover

Interstruct Communications AG

Berlin

Die Texterin

Köln

JUNIQUE Design

Bonn

Vogelsang Werbe- und Projektbüro

Hannover

New Era Marketing

Kämpfelbach

Agentur eintragen

8 Antworten

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

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

    Cheers
    Julia

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

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

    Wahnsinns gute Button! 🙂 Danke fürs Teilen!

  4. 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!

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

    Vielen lieben Dank für diese Mega-Buttonsammlung!

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

    Sehr informativer Beitrag, vielen Dank

Kommentare sind geschlossen.

Passende Beiträge

Sonnenaufgang auf dem Berg, über den Wolken
HTML

Website-Vorlagen: Die 101 besten, kostenlosen HTML-Templates (2021-Update)

Websiten so ganz ohne ein CMS zusammenzubauen ist eine schnelle und bequeme Art, die eigene Webseite live zu bringen. Das macht vor allem dann Sinn, wenn sich die Inhalte eh nur selten ändern. Im folgenden Artikel stellen wir also eine Sammlung an kostenlosen HTML-Templates zusammen. Viel Spaß damit!

Weiterlesen »
beispiel einer css-navigation des flexbox-albatross.
CSS

Responsive Navigation: CSS-only Dropdown-Menüs ohne JavaScript

Wohin mit der Navigation? Diese Frage muss bei eigentlich jedem Webprojekt beantwortet werden. Gerade bei umfangreichen Websites ist es nicht immer einfach, die richtige Antwort darauf zu finden. Besteht eine Webpräsenz aus vielen Seiten und Unterseiten, bietet sich häufig ein Dropdown-Menü an.

Weiterlesen »
Das große Dr. Web Icon-Set mit über 970 individuell anpassbaren Icons im SVG Format.
Illustrator

Das große Dr. Web Icon-Set: 970 Icons, im SVG-Format, kostenlos

Für Photoshop, Illustrator, Sketch & Co. Vollständig anpassbar. Größe, Breite, Form und Farbe können komplett an die Maßgaben deines Projekts angepasst werden. Alle Symbole sind Open Source unter MIT-Lizenz, können also in privaten und kommerziellen Projekten verwenden werden, ohne dass es einer Attribution bedarf.

Weiterlesen »
  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Dr. Web Autoren
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Menü
  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Dr. Web Autoren
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Wir verwenden Cookies, um Besucherzahlen zu messen. Mehr dazu in unserer Datenschutzerklärung. Einverstanden? EinstellungenIch stimme zu
Cookie-Einstellungen

Cookies im Überblick

Wir verwenden Cookies, mit denen wir analysieren und verstehen können, wie Sie diese Website nutzen. Auch kommen technisch notwendige Cookies zum Einsatz, bspw. für den Kunden-Login. Ferner verwenden wir auch Cookies von Drittanbietern. Diese Cookies werden nur mit Ihrer Zustimmung in Ihrem Browser gespeichert. Sie haben auch die Möglichkeit, diese Drittanbieter-Cookies zu deaktivieren. Das Deaktivieren dieser Cookies kann sich jedoch zulasten der Nutzererfahrung auswirken.
Notwendig
immer aktiv

Notwendige Cookies sind unbedingt erforderlich, damit die Website ordnungsgemäß funktioniert. Diese Kategorie enthält nur Cookies, die grundlegende Funktionen und Sicherheitsmerkmale der Website gewährleisten. Diese Cookies speichern keine persönlichen Informationen.

Nicht zwingen notwendige Cookies

Alle Cookies, die für die Funktion der Website nicht unbedingt erforderlich sind und zur Erhebung personenbezogener Daten des Benutzers über Analysen, Anzeigen und andere eingebettete Inhalte verwendet werden, werden als nicht erforderliche Cookies bezeichnet.

SPEICHERN UND AKZEPTIEREN
Das große Dr. Web Icon-Set:
970+ Icons, im SVG-Format
Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Danke nein, ist nichts für mich.
Invalid email address
Danke dir! Hier ist das Icon-Set:

Hier herunterladen (zip-Datei, 843 kB)

Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Danke nein, ist nichts für mich.
Invalid email address
Danke dir! Hier ist das Icon-Set:

Hier herunterladen (zip-Datei, 843 kB)