70 wunderschöne CSS Buttons (+ 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

Autor
Kocsten

Progrmmiert in
HTML, CSS

#2 Rounded Button

Autor
alticreation

Progrmmiert in
HTML, CSS (SCSS)

#3 Blubby Button

Autor
Nour Saud

Progrmmiert in
HTML, CSS

#4 Icon buttons

Progrmmiert in
HTML, CSS

#5 Blobs button

Autor
Hilary

Progrmmiert in
HTML, CSS (SCSS)

#6 Thin Buttons

Progrmmiert in
HTML, CSS

#7 Bootstrap Buttons

Autor
dew31794

Progrmmiert in
HTML, CSS (SCSS), JS

#8 Rounded Pulse Button

Autor
Raj Kamal

Progrmmiert in
HTML, CSS (SCSS)

#9 CSS Fizzy Button

Progrmmiert in
HTML (Haml), CSS (SCSS)

#10 Button N° 045

Progrmmiert in
HTML, CSS

#11 Flush button

Progrmmiert in
HTML, CSS

#12 Button Concept

Autor
Shyam

Progrmmiert in
HTML, CSS (SCSS), JS (CoffeeScript)

#13 Sliced Button

Autor
Sarah

Progrmmiert in
HTML, CSS

#14 More fancy Icon buttons

Progrmmiert in
HTML (Pug), CSS (SCSS)

#15 Button Change

Autor
thelaazyguy

Progrmmiert in
HTML, CSS

#16 Simple Button

Progrmmiert in
HTML, CSS (SCSS)

#17 Button Flip

Autor
Alex Moore

Progrmmiert in
HTML, CSS (SCSS)

#18 Swipe Right Button

Autor
thelaazyguy

Progrmmiert in
HTML, CSS

#19 Fancy Buttons

Progrmmiert in
HTML, CSS, JS

#20 FlipCover Buttons

Progrmmiert in
HTML, CSS (SCSS), JS

#21 Collection of Button Hover Effects

Autor
David Conner

Progrmmiert in
HTML, CSS (SCSS)

#22 CSS Button Effect: Animated Border & Glow

Progrmmiert in
HTML, CSS

#23 CSS Button Hover

Autor
Imran Pardes

Progrmmiert in
HTML, CSS

#24 Still in View

Autor
Alex Bodin

Progrmmiert in
HTML, CSS

#25 Pure CSS Button with Ring Indicator

Autor
Cole McCombs

Progrmmiert in
HTML, CSS

#26 Button Hover Effects

Autor
Kyle Brumm

Progrmmiert in
HTML, CSS (SCSS), JS

#27 Button bubble effect

Progrmmiert in
HTML, CSS (SCSS), JS

#28 Animation Submit Button

Progrmmiert in
HTML, CSS (SCSS), JS

#29 Who doesn’t like Fun Buttons?

Autor
Derek Morash

Progrmmiert in
HTML, CSS (SCSS)

#30 Flipside

Progrmmiert in
HTML, CSS (SCSS), JS

#31 Squishy Toggle Buttons

Progrmmiert in
HTML, CSS (Sass)

#32 Button hover effect with box-shadow

Autor
Giana

Progrmmiert in
HTML, CSS (SCSS)

#33 Submit Button (Anime.js)

Progrmmiert in
HTML, CSS (SCSS), JS (jQuery & anime.js)

#34 CSS Button Animation

Autor
Sasha

Progrmmiert in
HTML (Pug), CSS (SCSS), JS

#35 CSS Button on Plaid

Progrmmiert in
HTML, CSS

#36 CSS button with bubbles

Autor
Giana

Progrmmiert in
HTML, CSS (SCSS)

#37 jQuery +3D css button

Progrmmiert in
HTML, CSS, JS (jQuery)

#38 Pure CSS button switch

Progrmmiert in
HTML, CSS (SCSS)

#39 Creative Button Hover Collection

Progrmmiert in
HTML, CSS

#40 CSS Button Animations

Autor
Alex Loomer

Progrmmiert in
HTML, CSS

#41 CSS Button with Hover Effect

Autor
Kniw Studio

Progrmmiert in
HTML, CSS

#42 Button Practice

Autor
Ivan Villa

Progrmmiert in
HTML, CSS (SCSS)

#43 CSS Button-Neon Shadow with Animation

Autor
ps173

Progrmmiert in
HTML, CSS

#44 Six pure CSS Button Hover Animations

Autor
Christian

Progrmmiert in
HTML, CSS

#45 3D CSS BUTTON

Progrmmiert in
HTML, CSS, JS

#46 70s CSS Button

Progrmmiert in
HTML, CSS

#47 100 days css Button N° 045

Progrmmiert in
HTML, CSS

#48 Button Hover

Progrmmiert in
HTML, CSS (SCSS)

#49 Download Button Animation

Autor
Aaron Iker

Progrmmiert in
HTML, CSS (SCSS), JS (gsap)

#50 Liquid button

Autor
Waaark

Progrmmiert in
HTML, CSS, JS (jQuery)

#51 Awesome Buttons

Autor
Astitva2009

Progrmmiert in
HTML, CSS

#52 Awesome Button Hover Effect

Progrmmiert in
HTML, CSS

#53 Button Love #4 – 2019

Autor
punitweb

Progrmmiert in
HTML, CSS (SCSS)

#54 Button hover with slide animation

Autor
Ajeet Kumar

Progrmmiert in
HTML, CSS

#55 70s CSS Button

Autor
halvo

Progrmmiert in
HTML, CSS

#56 Button Love #4 – 2019

Autor
punit chawla

Progrmmiert in
HTML, CSS (SCSS)

#57 CSS Button Animation

Progrmmiert in
HTML, CSS, JS

#58 CSS Button Pending/Success/Fail Animation

Autor
Felix M.

Progrmmiert in
HTML, CSS (SCSS), JS (Babel)

#59 CSS Button transitions

Autor
Robin Treur

Progrmmiert in
HTML, CSS (SCSS)

#60 Neon Buttons

Progrmmiert in
HTML, CSS

#61 Pure CSS button hover animation

Autor
afa

Progrmmiert in
HTML, CSS (SCSS)

#62 Home Button Hover Effect #03

Autor
Eslam

Progrmmiert in
HTML, CSS

#63 Css Button Hover #1 – Stretchable Button

Autor
thelaazyguy

Progrmmiert in
HTML, CSS

#64 Supah Awesome CSS Button

Autor
Kyle Lavery

Progrmmiert in
HTML, CSS (SCSS)

#65 Pure CSS Button fill effects

Progrmmiert in
HTML, CSS (SCSS)

#66 CSS Button Hovers

Autor
MitchES

Progrmmiert in
HTML, CSS

#67 CSS button ripple

Autor
pjwdev

Progrmmiert in
HTML, CSS

#68 Pure CSS button hover animation

Autor
afa34

Progrmmiert in
HTML, CSS (SCSS)

#69 Pure CSS button switch

Autor
seyedi

Progrmmiert in
HTML, CSS

#70 3D CSS Buttons

Autor
kanishkkunal

Progrmmiert in
HTML, CSS

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

12 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. Lorenz 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. Lorenz sagt:

      Das stimmt, vielen Dank! 🙂

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

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

Das könnte dich auch interessieren