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.
See the Pen
Pure Css Button Hover effect by alticreation (@alticreation)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Bubbly Button by Nour Saud (@nourabusoud)
on CodePen.
See the Pen
Icon buttons by Andrea Maselli (@andrea-maselli)
on CodePen.
See the Pen
Blobs button by Hilary (@hilwat)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Simple CSS Button Hover Effects by Natalia Reshetnikova (@natalia-reshetnikova)
on CodePen.
See the Pen
Pure CSS Button Loader | Bootstrap 4 | SCSS by dew31794 (@dew31794)
on CodePen.
Tech-Stack
HTML, CSS (SCSS), JS
See the Pen
CSS Button With Hover Effect by Raj Kamal (@avvign)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
CSS Fizzy Button by Jürgen Leister (@webLeister)
on CodePen.
Tech-Stack
HTML (Haml), CSS (SCSS)
See the Pen
100 days css Button N° 045 by Vitor Siqueira (@vitor-siqueira)
on CodePen.
See the Pen
Flush button by AbhishekBaiju (@abhishekbaiju)
on CodePen.
See the Pen
Button Concept by Shyam (@Shtam3x)
on CodePen.
Tech-Stack
HTML, CSS (SCSS), JS (CoffeeScript)
See the Pen
CSS Sliced Button by Sarah (@saraharaya)
on CodePen.
See the Pen
Pure CSS Buttons by Ishaan Saxena (@ishaansaxena)
on CodePen.
Tech-Stack
HTML (Pug), CSS (SCSS)
See the Pen
Css Button Hover #5 by thelaazyguy (@thelaazyguy)
on CodePen.
See the Pen
CSS button by Tiberiu Raducea (@tyberiu88)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Auto Width Css Button Flip by Alex Moore (@MoorLex)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Css Button Hover #2 – Background by thelaazyguy (@thelaazyguy)
on CodePen.
See the Pen
CSS Button Effect by Alexandre do Vale (@alexandrevale)
on CodePen.
See the Pen
FlipCover CSS Mixin by Velina V Veleva (@vveleva)
on CodePen.
Tech-Stack
HTML, CSS (SCSS), JS
See the Pen
Collection of Button Hover Effects by David Conner (@davidicus)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
CSS Button Effect: Animated Border & Glow. by Blade Multimedia (@AnthonyBmm)
on CodePen.
See the Pen
CSS BUTTON HOVER by Imran Pardes (@folaad)
on CodePen.
#24 Still in View
See the Pen
XWrqpxB by Alex Bodin (@Alexb98)
on CodePen.
See the Pen
Pure CSS Button with Ring Indicator by Cole McCombs (@mccombsc)
on CodePen.
See the Pen
Button Hover Effects by Kyle Brumm (@kjbrum)
on CodePen.
Tech-Stack
HTML, CSS (SCSS), JS
See the Pen
Button bubble effect by Adrien Grsmto (@Grsmto)
on CodePen.
Tech-Stack
HTML, CSS (SCSS), JS
See the Pen
animation submit button by Valentin Galmand (@valentingalmand)
on CodePen.
Tech-Stack
HTML, CSS (SCSS), JS
See the Pen
CSS BUTTONS!! by Derek Morash (@derekmorash)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
#30 Flipside
See the Pen
Flipside by Hakim El Hattab (@hakimel)
on CodePen.
Tech-Stack
HTML, CSS (SCSS), JS
See the Pen
Squishy Toggle Buttons by Justin Windle (@soulwire)
on CodePen.
Tech-Stack
HTML, CSS (Sass)
See the Pen
Button hover effects with box-shadow by Giana (@giana)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Submit Button (Anime.js) by Andrew Millen (@andrewmillen)
on CodePen.
Tech-Stack
HTML, CSS (SCSS), JS (jQuery & anime.js)
See the Pen
CSS Button Animation by Sasha (@sashatran)
on CodePen.
Tech-Stack
HTML (Pug), CSS (SCSS), JS
See the Pen
CSS Button on Plaid by Marcus Connor (@marcusconnor)
on CodePen.
See the Pen
CSS button with bubbles by Giana (@giana)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
jQuery +3D css button by Carlos G Notario (@CarlosGNotario)
on CodePen.
Tech-Stack
HTML, CSS, JS (jQuery)
See the Pen
Pure CSS button switch by Kitty Giraudel (@KittyGiraudel)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Creative Button Hover Collection by Yasin Softaoğlu (@ysoftaoglu)
on CodePen.
See the Pen
CSS Button Animations by Alex Loomer (@atloomer)
on CodePen.
See the Pen
CSS Button with Hover Effect by Kniw Studio (@JeremyWink)
on CodePen.
See the Pen
Button Practice by Ivan Villa (@ivillacreative)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
CSS BUTTON DESIGN ANIMATION by ABlimits Studio (@ablimits)
on CodePen.
See the Pen
Six Pure CSS Button Hover Animations by Christian (@CTNieves)
on CodePen.
See the Pen
3D CSS BUTTON by SULEMANS CODES (@coding-with-SR)
on CodePen.
See the Pen
70s CSS Button by Jordan Halvorsen (@halvo)
on CodePen.
See the Pen
100 days css Button N° 045 by Vitor Siqueira (@vitor-siqueira)
on CodePen.
See the Pen
Button Hover by Katherine Kato (@kathykato)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Download Button Animation by Aaron Iker (@aaroniker)
on CodePen.
Tech-Stack
HTML, CSS (SCSS), JS (gsap)
See the Pen
Liquid button by Waaark (@waaark)
on CodePen.
Tech-Stack
HTML, CSS, JS (jQuery)
See the Pen
Awesome Buttons by Astitva2009 (@astitva2009)
on CodePen.
See the Pen
Awesome Button Hover Effect by Devang Bajpai (@Devang-Bajpai)
on CodePen.
See the Pen
CSS Button Hover Effect INK by morgasmatron (@morgasmatron)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Button hover with slide animation , click Buttons using pure css button by Ajeet Kumar (@Ajeet_Kumar)
on CodePen.
See the Pen
70s CSS Button by Jordan Halvorsen (@halvo)
on CodePen.
See the Pen
Button Love #4 – 2019 by punit chawla (@punitweb)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
CSS Button Animation by Yohaan Chokhany (@yohaanchokhany)
on CodePen.
See the Pen
CSS Button Pending / Success / Fail Animation by Felix M. (@fxm90)
on CodePen.
Tech-Stack
HTML, CSS (SCSS), JS (Babel)
See the Pen
CSS Button transitions by Robin Treur (@RobinTreur)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Untitled by Np|Nihad Pasa (@nP-NIHAD-PASA-)
on CodePen.
See the Pen
Pure CSS button hover animation by afa (@afa34)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Button Hover Effect #03 by Eslam (@Eslam_Refa3y)
on CodePen.
See the Pen
Css Button Hover #1 – Stretchable Button by thelaazyguy (@thelaazyguy)
on CodePen.
See the Pen
Supah Awesome CSS Button by Kyle Lavery (@kylelavery88)
on CodePen.
Tech-Stack
HTML, CSS (SCSS)
See the Pen
Pure CSS Button fill effects by Pieter Biesemans (@pieter-biesemans)
on CodePen.
Tech-Stack
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:
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.
Das freut mich! 🙂
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!
Das stimmt, vielen Dank! 🙂