35 coole CSS Buttons – mit Animationen!

35 coole CSS Buttons – mit Animationen! Thumbnail
Veröffentlicht am 8. Juni 2019Zuletzt aktualisiert am 17. April 2021

Buttons sind nicht nur für die Benutzerfreundlichkeit gut, sondern auch ein extrem wichtiges Gestaltungselement für Deine Website. Aus diesem Grund gibt es hier eine Sammlung der besten CSS Buttons!

Anzeige

Ob dick und fett auf Deiner Startseite oder klein und dezent im Footer, Buttons sind für den Nutzerfluss auf Deiner Website ein sehr wichtiges Designelement. Für eine Firmenwebsite wird oft auf dezentere Gestaltung gesetzt, wohin gegen bei kreativen Branchen eher etwas auffälligere und „schrille“ Buttons genutzt werden. Damit alle Branchen gleichermaßen bedient sind, findest Du hier ganz viele verschiedene Styles und Kombinationen.

Auch auf Animationen beim Hover oder Focus lege ich – und viele andere Webentwickler/designer – viel Wert, weshalb alle der folgenden Buttons auch jeweils schöne Animationen mitbringen. Aber nun starten wir direkt!

Die gezeigten Pens sind mit MIT lizensiert. Mehr Infos zur eigenen Nutzung findest Du im Codepen Blog.

#1 Hover Glow Effect

Autor: Kocsten;
Programmiert in: HTML, CSS;

#2 Rounded Button

Autor: alticreation;
Programmiert in: HTML, CSS (SCSS);

#3 Blubby Button

Autor: Nour Saud;
Programmiert in: HTML, CSS;

#4 Icon buttons

Anzeige

Autor: Andrea Maselli;
Programmiert in: HTML, CSS;

#5 Blobs button

Autor: Hilary;
Programmiert in:
HTML, CSS (SCSS);

#6 Thin Buttons

Autor: Natalia Reshetnikova;
Programmiert in: HTML, CSS;

#7 Bootstrap Buttons

Autor: dew31794;
Programmiert in: HTML, CSS (SCSS), JS;

#8 Rounded Pulse Button

Anzeige

Autor: Raj Kamal;
Programmiert in: HTML, CSS (SCSS);

#9 CSS Fizzy Button

Autor: Jürgen Leister;
Programmiert in: HTML (Haml), CSS (SCSS);

#10 Button N° 045

Autor: Vitor Siqueira;
Programmiert in: HTML, CSS;

#11 Flush button

Autor: AbhishekBaiju;
Programmiert in: HTML, CSS;

#12 Button Concept

Autor: Shyam;
Programmiert in: HTML, CSS (SCSS), JS (CoffeeScript);

#13 Sliced Button

Anzeige

Autor: Sarah;
Programmiert in: HTML, CSS;

#14 More fancy Icon buttons

Autor: Ishaan Saxena;
Programmiert in: HTML (Pug), CSS (SCSS);

#15 Button Change

Autor: thelaazyguy;
Programmiert in: HTML, CSS;

#16 Simple Button

Autor: Tiberiu Raducea;
Programmiert in: HTML, CSS (SCSS);

#17 Button Flip

Autor: Alex Moore;
Programmiert in: HTML, CSS (SCSS);

#18 Swipe Right Button

Anzeige

Autor: thelaazyguy;
Programmiert in: HTML, CSS;

#19 Fancy Buttons

Autor: Alexandre do Vale;
Programmiert in: HTML, CSS, JS;

#20 FlipCover Buttons

Autor: Velina V Veleva;
Programmiert in: HTML, CSS (SCSS), JS;

#21 Collection of Button Hover Effects

Autor: David Conner;
Programmiert in: HTML, CSS (SCSS);

#22 CSS Button Effect: Animated Border & Glow

Autor: Blade Multimedia;
Programmiert in: HTML, CSS;

Anzeige

#23 CSS Button Hover

Autor: Imran Pardes;
Programmiert in: HTML, CSS;

#24 Still in View

Autor: Alex Bodin;
Programmiert in: HTML, CSS;

#25 Pure CSS Button with Ring Indicator

Autor: Cole McCombs;
Programmiert in: HTML, CSS;

#26 Button Hover Effects

Autor: Kyle Brumm;
Programmiert in: HTML, CSS (SCSS), JS;

#27 Gooey Menu

Autor: Luca Bebber;
Programmiert in: HTML, CSS (SCSS);

Anzeige

#28 SVG CSS3 Menu/Burger Button

Autor: Kyle Henwood;
Programmiert in: HTML, CSS (SCSS), JS;

#29 Button bubble effect

Autor: Adrien Grsmto;
Programmiert in: HTML, CSS (SCSS), JS;

#30 Animation Submit Button

Autor: Valentin Galmand;
Programmiert in: HTML, CSS (SCSS), JS;

#31 Who doesn’t like Fun Buttons?

Autor: Derek Morash;
Programmiert in: HTML, CSS (SCSS);

#32 Flipside

Autor: Hakim El Hattab;
Programmiert in: HTML, CSS (SCSS), JS;

Anzeige

#33 Squishy Toggle Buttons

Autor: Justin Windle;
Programmiert in: HTML, CSS (Sass);

#34 Button hover effect with box-shadow

Autor: Giana;
Programmiert in: HTML, CSS (SCSS);

#35 Submit Button (Anime.js)

Autor: Andrew Millen;
Programmiert in: HTML, CSS (SCSS), JS (jQuery & anime.js);

Fazit

Welcher gefällt Dir am besten? Wenn Du auch Buttons auf Codepen veröffentlicht hast, lass es mich gerne wissen, damit ich diese Liste erweitern kann! 🙂

Hinweis: Alle Buttons sind alle auf codepen.io veröffentlicht und nicht von mir.

Noch nicht genug? Dann könnte das etwas für Dich sein!

Ähnliche Beiträge
💬 Beteilige dich an der Unterhaltung

8 Kommentare

  1. Jan Hartmann sagt:

    Vielen lieben Dank für diese reichhaltige CSS Sammlung. Das Ein oder Andere, habe ich auf meiner Seite in leicht abgewandelter Form gleich ausprobiert. Wunderbar.

    1. LH sagt:

      Das freut mich! 🙂

  2. Wahnsinn, was heute allein mit CSS möglich ist. Es ist nicht lange her, da hätte man Flash oder GIF für diese Aufgaben verwenden müssen. Die gezeigten Button-Beispiele sind wirklich sehr nice, danke!

    1. LH sagt:

      Das stimmt, vielen Dank! 🙂

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