65 coole CSS Buttons – mit Animationen!

CSS Buttons sind ein wichtiger Bestandteil des Webdesigns, da sie nicht nur die Benutzerfreundlichkeit verbessern, sondern auch das Aussehen und die Ästhetik der Website beeinflussen. In diesem Artikel findest du eine Sammlung der besten CSS-Buttons.

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 ein dezenteres Design 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 Button Styles.

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

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.

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.

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.

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;

#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;

#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 CSS Button Hover

See the Pen CSS BUTTON HOVER by Imran Pardes (@folaad) on CodePen.

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

#24 Still in View

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

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 Button bubble effect

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

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

#28 Animation Submit Button

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

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

#29 Who doesn’t like Fun Buttons?

See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen.

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

#30 Flipside

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

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

#31 Squishy Toggle Buttons

See the Pen Squishy Toggle Buttons by Justin Windle (@soulwire) on CodePen.

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

#32 Button hover effect with box-shadow

See the Pen Button hover effects with box-shadow by Giana (@giana) on CodePen.

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

#33 Submit Button (Anime.js)

See the Pen Submit Button (Anime.js) by Andrew Millen (@andrewmillen) on CodePen.

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

#34 CSS Button Animation

See the Pen CSS Button Animation by Sasha (@sashatran) on CodePen.

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

#35 CSS Button on Plaid

See the Pen CSS Button on Plaid by Marcus Connor (@marcusconnor) on CodePen.

Autor: Marcus Connor;
Programmiert in: HTML, CSS;

#36 CSS button with bubbles

See the Pen CSS button with bubbles by Giana (@giana) on CodePen.

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

#37 jQuery +3D css button

See the Pen jQuery +3D css button by Carlos G Notario (@CarlosGNotario) on CodePen.

Autor: Carlos G Notario;
Programmiert in: HTML, CSS, JS (jQuery);

#38 Pure CSS button switch

See the Pen Pure CSS button switch by Kitty Giraudel (@KittyGiraudel) on CodePen.

Autor: Kitty Giraudel;
Programmiert in: HTML, CSS (SCSS);

#39 Creative Button Hover Collection

See the Pen Creative Button Hover Collection by Yasin Softaoğlu (@ysoftaoglu) on CodePen.

Autor: Yasin Softaoğlu;
Programmiert in: HTML, CSS;

#40 CSS Button Animations

See the Pen CSS Button Animations by Alex Loomer (@atloomer) on CodePen.

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

#41 CSS Button with Hover Effect

See the Pen CSS Button with Hover Effect by Kniw Studio (@JeremyWink) on CodePen.

Autor: Kniw Studio;
Programmiert in: HTML, CSS;

#42 Button Practice

See the Pen Button Practice by Ivan Villa (@ivillacreative) on CodePen.

Autor: Ivan Villa;
Programmiert in: HTML, CSS (SCSS);

#43 CSS Button Design Animation

See the Pen CSS BUTTON DESIGN ANIMATION by ABlimits Studio (@ablimits) on CodePen.

Autor: ABlimits Studio;
Programmiert in: HTML, CSS;

#44 Six pure CSS Button Hover Animations

See the Pen Six Pure CSS Button Hover Animations by Christian (@CTNieves) on CodePen.

Autor: Christian;
Programmiert in: HTML, CSS;

#45 3D CSS BUTTON

See the Pen 3D CSS BUTTON by SULEMANS CODES (@coding-with-SR) on CodePen.

Autor: SULEMANS CODES;
Programmiert in: HTML, CSS, JS;

#46 70s CSS Button

See the Pen 70s CSS Button by Jordan Halvorsen (@halvo) on CodePen.

Autor: Jordan Halvorsen;
Programmiert in: HTML, CSS;

#47 100 days css 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;

#48 Button Hover

See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.

Autor: Katherine Kato;
Programmiert in: HTML, CSS (SCSS);

#49 Download Button Animation

See the Pen Download Button Animation by Aaron Iker (@aaroniker) on CodePen.

Autor: Aaron Iker;
Programmiert in: HTML, CSS (SCSS), JS (gsap);

#50 Liquid button

See the Pen Liquid button by Waaark (@waaark) on CodePen.

Autor: Waaark;
Programmiert in: HTML, CSS, JS (jQuery);

#51 Awesome Buttons

See the Pen Awesome Buttons by Astitva2009 (@astitva2009) on CodePen.

Autor: Astitva2009;
Programmiert in: HTML, CSS;

#52 Awesome Button Hover Effect

See the Pen Awesome Button Hover Effect by Devang Bajpai (@Devang-Bajpai) on CodePen.

Autor: Devang Bajpai;
Programmiert in: HTML, CSS;

#53 CSS Button Hover Effect INK

See the Pen CSS Button Hover Effect INK by morgasmatron (@morgasmatron) on CodePen.

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

#54 Button hover with slide animation

See the Pen Button hover with slide animation , click Buttons using pure css button by Ajeet Kumar (@Ajeet_Kumar) on CodePen.

Autor: Ajeet Kumar;
Programmiert in: HTML, CSS;

#55 70s CSS Button

See the Pen 70s CSS Button by Jordan Halvorsen (@halvo) on CodePen.

Autor: halvo;
Programmiert in: HTML, CSS;

#56 Button Love #4 – 2019

See the Pen Button Love #4 – 2019 by punit chawla (@punitweb) on CodePen.

Autor: punit chawla;
Programmiert in: HTML, CSS (SCSS);

#57 CSS Button Animation

See the Pen CSS Button Animation by Yohaan Chokhany (@yohaanchokhany) on CodePen.

Autor: Yohaan Chokhany;
Programmiert in: HTML, CSS, JS;

#58 CSS Button Pending/Success/Fail Animation

See the Pen CSS Button Pending / Success / Fail Animation by Felix M. (@fxm90) on CodePen.

Autor: Felix M.;
Programmiert in: HTML, CSS (SCSS), JS (Babel);

#59 CSS Button transitions

See the Pen CSS Button transitions by Robin Treur (@RobinTreur) on CodePen.

Autor: Robin Treur;
Programmiert in: HTML, CSS (SCSS);

#60 Neon Buttons

See the Pen Untitled by Np|Nihad Pasa (@nP-NIHAD-PASA-) on CodePen.

Autor: Np|Nihad Pasa;
Programmiert in: HTML, CSS;

#61 Pure CSS button hover animation

See the Pen Pure CSS button hover animation by afa (@afa34) on CodePen.

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

#62 Home Button Hover Effect #03

See the Pen Button Hover Effect #03 by Eslam (@Eslam_Refa3y) on CodePen.

Autor: Eslam;
Programmiert in: HTML, CSS;

#63 Css Button Hover #1 – Stretchable Button

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

Autor: thelaazyguy;
Programmiert in: HTML, CSS;

#64 Supah Awesome CSS Button

See the Pen Supah Awesome CSS Button by Kyle Lavery (@kylelavery88) on CodePen.

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

#65 Pure CSS Button fill effects

See the Pen Pure CSS Button fill effects by Pieter Biesemans (@pieter-biesemans) on CodePen.

Autor: Pieter Biesemans;
Programmiert in: HTML, CSS (SCSS);

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: