30 coole CSS Buttons – mit Animationen!

30 coole CSS Buttons – mit Animationen! Thumbnail
Veröffentlicht am 8. Juni 2019Zuletzt aktualisiert am 22. Juni 2020

Buttons sind nicht nur für die Navigation der Benutzer gut, sondern auch ein extrem wichtiges Gestaltungselement für jede 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 „schräge“ CSS 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!

Wenn Du solche Animationen selbst erstellen willst, solltest Du dieses Buch ausprobieren*.

#1 Hover Glow Effect

See the Pen Чистый CSS Button Hover Glow Effect by Kocsten (@kocsten) on CodePen.

Autor: Kocsten;
Programmiert in: HTML, CSS;

#2 Rounded Button

See the Pen Pure Css Button Hover effect by alticreation (@alticreation) on CodePen.

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

#3 Blubby Button

See the Pen Bubbly Button by Nour Saud (@nourabusoud) on CodePen.

Anzeige

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

#4 Icon buttons

See the Pen Icon buttons by Andrea Maselli (@andrea-maselli) on CodePen.

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

#5 Blobs button

See the Pen Blobs button by Hilary (@hilwat) on CodePen.

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

#6 Thin Buttons

See the Pen Simple CSS Button Hover Effects by Natalia Reshetnikova (@natalia-reshetnikova) on CodePen.

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

#7 Bootstrap Buttons

See the Pen Pure CSS Button Loader | Bootstrap 4 | SCSS by dew31794 (@dew31794) on CodePen.

Anzeige

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

#8 Rounded Pulse Button

See the Pen CSS Button With Hover Effect by Raj Kamal (@avvign) on CodePen.

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

#9 CSS Fizzy Button

See the Pen CSS Fizzy Button by Jürgen Leister (@webLeister) on CodePen.

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

#10 Button N° 045

See the Pen 100 days css Button N° 045 by Vitor Siqueira (@vitor-siqueira) on CodePen.

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

#11 Flush button

See the Pen Flush button by AbhishekBaiju (@abhishekbaiju) on CodePen.

Anzeige

Autor: AbhishekBaiju;
Programmiert in: HTML, CSS;

#12 Button Concept

See the Pen Button Concept by Shyam (@Shtam3x) on CodePen.

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

#13 Sliced Button

See the Pen CSS Sliced Button by Sarah (@saraharaya) on CodePen.

Autor: Sarah;
Programmiert in: HTML, CSS;

#14 More fancy Icon buttons

See the Pen Pure CSS Buttons by Ishaan Saxena (@ishaansaxena) on CodePen.

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

#15 Button Change

See the Pen Css Button Hover #5 by thelaazyguy (@thelaazyguy) on CodePen.

Autor: thelaazyguy;
Programmiert in: HTML, CSS;

Anzeige

#16 Simple Button

See the Pen CSS button by Tiberiu Raducea (@tyberiu88) on CodePen.

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

#17 Button Flip

See the Pen Auto Width Css Button Flip by Alex Moore (@MoorLex) on CodePen.

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

#18 Swipe Right Button

See the Pen Css Button Hover #2 – Background by thelaazyguy (@thelaazyguy) on CodePen.

Autor: thelaazyguy;
Programmiert in: HTML, CSS;

#19 Fancy Buttons

See the Pen CSS Button Effect by Alexandre do Vale (@alexandrevale) on CodePen.

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

Anzeige

#20 FlipCover Buttons

See the Pen FlipCover CSS Mixin by Velina V Veleva (@vveleva) on CodePen.

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

#21 Collection of Button Hover Effects

See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.

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

#22 CSS Button Effect: Animated Border & Glow

See the Pen CSS Button Effect: Animated Border & Glow. by Blade Multimedia (@AnthonyBmm) on CodePen.

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

#23 Animated CSS button idea

See the Pen Animated CSS button idea by Scott Cole (@scott-cole) on CodePen.

Autor: Scott Cole;
Programmiert in: HTML, CSS (SCSS);

#24 Still in View

See the Pen XWrqpxB by Alex Bodin (@Alexb98) on CodePen.

Anzeige

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

#25 Pure CSS Button with Ring Indicator

See the Pen Pure CSS Button with Ring Indicator by Cole McCombs (@mccombsc) on CodePen.

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

#26 Button Hover Effects

See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.

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

#27 Gooey Menu

See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.

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

#28 SVG CSS3 Menu/Burger Button

See the Pen SVG CSS3 Menu / Burger Button by Kyle Henwood (@kylehenwood) on CodePen.

Anzeige

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

#29 Button bubble effect

See the Pen Button bubble effect by Adrien Grsmto (@Grsmto) on CodePen.

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

#30 Animation Submit Button

See the Pen animation submit button by Valentin Galmand (@valentingalmand) on CodePen.

Autor: Valentin Galmand;
Programmiert in: HTML, CSS (SCSS), 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! 🙂

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

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

Ähnliche Beiträge
Beteilige dich an der Unterhaltung

1 Kommentar

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