CSS buttons are an important part of web design, as they not only improve the user experience, but also affect the look and aesthetics of the website. In this article you will find a collection of the best CSS buttons.
Whether big and bold on your home page or small and discreet in the footer, buttons are a very important design element for the user flow on your website. For a corporate website, a more discreet design is often used, while creative industries tend to use more eye-catching and “flashy” buttons. So that all industries are equally served, you will find many different button styles here.
I – and many other web developers/designers – also set a high value on animations for Hover or Focus, which is why all of the following buttons bring along nice animations. But now we start directly!
The pens shown are licensed with MIT. You can find more info about your own use on the 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)
Conclusion
Which button do you like best? If you have also published buttons on codepen, please let me know so I can extend this list! 🙂
Note: All buttons are all published on codepen.io and not by me.
Not enough? Then this could be something for you:
ok
this is so creative, so gratful !!
These are some great examples and best part is some of the are pure CSS. Thank you for the collection.
You give awesome button css example, this is tutorial that i need.Hi, thank you.
This is the biggest collection of animated buttons, I have seen so far!
no.
It’s an awesome CSS buttons animation collections. I have a one more example for this http://css3tools.com/css-snippets/buttons-with-animated-border-on-hover/,
After I originally commented I appear to have clicked the -Notify
me when new comments are added- checkbox and from now on whenever a comment is added I receive 4 emails with the same
comment. Perhaps there is a means you are able to remove me from that
service? Thank you!
Hi, if you tell me the email address you get the mails, I can check that for you. You can contact me via lh[at]webdeasy.de 🙂
These are some great examples and best part is some of the are pure CSS. Thank you for the collection.
Thank you so much! 🙂