65 wunderschöne CSS Buttons

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

Tech-Stack

HTML, CSS

#2 Rounded Button

Autor

alticreation

Tech-Stack

HTML, CSS (SCSS)

#3 Blubby Button

Autor

Nour Saud

Tech-Stack

HTML, CSS

#4 Icon buttons

Tech-Stack

HTML, CSS

#5 Blobs button

Autor

Hilary

Tech-Stack

HTML, CSS (SCSS)

#6 Thin Buttons

Tech-Stack

HTML, CSS

#7 Bootstrap Buttons

Autor

dew31794

Tech-Stack

HTML, CSS (SCSS), JS

#8 Rounded Pulse Button

Autor

Raj Kamal

Tech-Stack

HTML, CSS (SCSS)

#9 CSS Fizzy Button

Tech-Stack

HTML (Haml), CSS (SCSS)

#10 Button N° 045

Tech-Stack

HTML, CSS

#11 Flush button

Tech-Stack

HTML, CSS

#12 Button Concept

Autor

Shyam

Tech-Stack

HTML, CSS (SCSS), JS (CoffeeScript)

#13 Sliced Button

Autor

Sarah

Tech-Stack

HTML, CSS

#14 More fancy Icon buttons

Tech-Stack

HTML (Pug), CSS (SCSS)

#15 Button Change

Autor

thelaazyguy

Tech-Stack

HTML, CSS

#16 Simple Button

Tech-Stack

HTML, CSS (SCSS)

#17 Button Flip

Autor

Alex Moore

Tech-Stack

HTML, CSS (SCSS)

#18 Swipe Right Button

Autor

thelaazyguy

Tech-Stack

HTML, CSS

#19 Fancy Buttons

Tech-Stack

HTML, CSS, JS

#20 FlipCover Buttons

Tech-Stack

HTML, CSS (SCSS), JS

#21 Collection of Button Hover Effects

Autor

David Conner

Tech-Stack

HTML, CSS (SCSS)

#22 CSS Button Effect: Animated Border & Glow

Tech-Stack

HTML, CSS

#23 CSS Button Hover

Autor

Imran Pardes

Tech-Stack

HTML, CSS

#24 Still in View

Autor

Alex Bodin

Tech-Stack

HTML, CSS

#25 Pure CSS Button with Ring Indicator

Autor

Cole McCombs

Tech-Stack

HTML, CSS

#26 Button Hover Effects

Autor

Kyle Brumm

Tech-Stack

HTML, CSS (SCSS), JS

#27 Button bubble effect

Tech-Stack

HTML, CSS (SCSS), JS

#28 Animation Submit Button

Tech-Stack

HTML, CSS (SCSS), JS

#29 Who doesn’t like Fun Buttons?

Autor

Derek Morash

Tech-Stack

HTML, CSS (SCSS)

#30 Flipside

Tech-Stack

HTML, CSS (SCSS), JS

#31 Squishy Toggle Buttons

Tech-Stack

HTML, CSS (Sass)

#32 Button hover effect with box-shadow

Autor

Giana

Tech-Stack

HTML, CSS (SCSS)

#33 Submit Button (Anime.js)

Tech-Stack

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

#34 CSS Button Animation

Autor

Sasha

Tech-Stack

HTML (Pug), CSS (SCSS), JS

#35 CSS Button on Plaid

Tech-Stack

HTML, CSS

#36 CSS button with bubbles

Autor

Giana

Tech-Stack

HTML, CSS (SCSS)

#37 jQuery +3D css button

Tech-Stack

HTML, CSS, JS (jQuery)

#38 Pure CSS button switch

Tech-Stack

HTML, CSS (SCSS)

#39 Creative Button Hover Collection

Tech-Stack

HTML, CSS

#40 CSS Button Animations

Autor

Alex Loomer

Tech-Stack

HTML, CSS

#41 CSS Button with Hover Effect

Autor

Kniw Studio

Tech-Stack

HTML, CSS

#42 Button Practice

Autor

Ivan Villa

Tech-Stack

HTML, CSS (SCSS)

#43 CSS Button Design Animation

Tech-Stack

HTML, CSS

#44 Six pure CSS Button Hover Animations

Autor

Christian

Tech-Stack

HTML, CSS

#45 3D CSS BUTTON

Tech-Stack

HTML, CSS, JS

#46 70s CSS Button

Tech-Stack

HTML, CSS

#47 100 days css Button N° 045

Tech-Stack

HTML, CSS

#48 Button Hover

Tech-Stack

HTML, CSS (SCSS)

#49 Download Button Animation

Autor

Aaron Iker

Tech-Stack

HTML, CSS (SCSS), JS (gsap)

#50 Liquid button

Autor

Waaark

Tech-Stack

HTML, CSS, JS (jQuery)

#51 Awesome Buttons

Autor

Astitva2009

Tech-Stack

HTML, CSS

#52 Awesome Button Hover Effect

Tech-Stack

HTML, CSS

#53 CSS Button Hover Effect INK

Autor

morgasmatron

Tech-Stack

HTML, CSS (SCSS)

#54 Button hover with slide animation

Autor

Ajeet Kumar

Tech-Stack

HTML, CSS

#55 70s CSS Button

Autor

halvo

Tech-Stack

HTML, CSS

#56 Button Love #4 – 2019

Autor

punit chawla

Tech-Stack

HTML, CSS (SCSS)

#57 CSS Button Animation

Tech-Stack

HTML, CSS, JS

#58 CSS Button Pending/Success/Fail Animation

Autor

Felix M.

Tech-Stack

HTML, CSS (SCSS), JS (Babel)

#59 CSS Button transitions

Autor

Robin Treur

Tech-Stack

HTML, CSS (SCSS)

#60 Neon Buttons

Tech-Stack

HTML, CSS

#61 Pure CSS button hover animation

Autor

afa

Tech-Stack

HTML, CSS (SCSS)

#62 Home Button Hover Effect #03

Autor

Eslam

Tech-Stack

HTML, CSS

#63 Css Button Hover #1 – Stretchable Button

Autor

thelaazyguy

Tech-Stack

HTML, CSS

#64 Supah Awesome CSS Button

Autor

Kyle Lavery

Tech-Stack

HTML, CSS (SCSS)

#65 Pure CSS Button fill effects

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:

Ähnliche Beiträge
Beteilige dich an der Unterhaltung

11 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