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

Autor: Kocsten;
Programmiert in: HTML, CSS;

#2 Rounded Button

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

#3 Blubby Button

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

#4 Icon buttons

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

#5 Blobs button

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

#6 Thin Buttons

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

#7 Bootstrap Buttons

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

#8 Rounded Pulse Button

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

#9 CSS Fizzy Button

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

#10 Button N° 045

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

#11 Flush button

Autor: AbhishekBaiju;
Programmiert in: HTML, CSS;

#12 Button Concept

Nutzererfahrung verbessern und gleichzeitig Geld verdienen?

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

#13 Sliced Button

Autor: Sarah;
Programmiert in: HTML, CSS;

#14 More fancy Icon buttons

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

#15 Button Change

Autor: thelaazyguy;
Programmiert in: HTML, CSS;

#16 Simple Button

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

#17 Button Flip

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

#18 Swipe Right Button

Autor: thelaazyguy;
Programmiert in: HTML, CSS;

#19 Fancy Buttons

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

#20 FlipCover Buttons

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

#21 Collection of Button Hover Effects

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

#22 CSS Button Effect: Animated Border & Glow

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

#23 CSS Button Hover

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

#24 Still in View

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

#25 Pure CSS Button with Ring Indicator

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

#26 Button Hover Effects

Nutzererfahrung verbessern und gleichzeitig Geld verdienen?

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

#27 Button bubble effect

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

#28 Animation Submit Button

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

#29 Who doesn’t like Fun Buttons?

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

#30 Flipside

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

#31 Squishy Toggle Buttons

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

#32 Button hover effect with box-shadow

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

#33 Submit Button (Anime.js)

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

#34 CSS Button Animation

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

#35 CSS Button on Plaid

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

#36 CSS button with bubbles

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

#37 jQuery +3D css button

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

#38 Pure CSS button switch

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

#39 Creative Button Hover Collection

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

Nutzererfahrung verbessern und gleichzeitig Geld verdienen?

#40 CSS Button Animations

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

#41 CSS Button with Hover Effect

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

#42 Button Practice

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

#43 CSS Button Design Animation

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

#44 Six pure CSS Button Hover Animations

Autor: Christian;
Programmiert in: HTML, CSS;

#45 3D CSS BUTTON

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

#46 70s CSS Button

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

#47 100 days css Button N° 045

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

#48 Button Hover

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

#49 Download Button Animation

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

#50 Liquid button

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

#51 Awesome Buttons

Autor: Astitva2009;
Programmiert in: HTML, CSS;

#52 Awesome Button Hover Effect

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

#53 CSS Button Hover Effect INK

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

#54 Button hover with slide animation

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

#55 70s CSS Button

Autor: halvo;
Programmiert in: HTML, CSS;

#56 Button Love #4 – 2019

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

#57 CSS Button Animation

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

#58 CSS Button Pending/Success/Fail Animation

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

#59 CSS Button transitions

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

#60 Neon Buttons

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

#61 Pure CSS button hover animation

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

#62 Home Button Hover Effect #03

Autor: Eslam;
Programmiert in: HTML, CSS;

#63 Css Button Hover #1 – Stretchable Button

Autor: thelaazyguy;
Programmiert in: HTML, CSS;

#64 Supah Awesome CSS Button

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

#65 Pure CSS Button fill effects

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:

Ä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