65 Beautiful CSS Buttons

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

Author

Kocsten

Tech-Stack

HTML, CSS

#2 Rounded Button

Author

alticreation

Tech-Stack

HTML, CSS (SCSS)

#3 Blubby Button

Author

Nour Saud

Tech-Stack

HTML, CSS

#4 Icon buttons

Tech-Stack

HTML, CSS

#5 Blobs button

Author

Hilary

Tech-Stack

HTML, CSS (SCSS)

#6 Thin Buttons

Tech-Stack

HTML, CSS

#7 Bootstrap Buttons

Author

dew31794

Tech-Stack

HTML, CSS (SCSS), JS

#8 Rounded Pulse Button

Author

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

Author

AbhishekBaiju

Tech-Stack

HTML, CSS

#12 Button Concept

Author

Shyam

Tech-Stack

HTML, CSS (SCSS), JS (CoffeeScript)

#13 Sliced Button

Author

Sarah

Tech-Stack

HTML, CSS

#14 More fancy Icon buttons

Author

Ishaan Saxena

Tech-Stack

HTML (Pug), CSS (SCSS)

#15 Button Change

Author

thelaazyguy

Tech-Stack

HTML, CSS

#16 Simple Button

Tech-Stack

HTML, CSS (SCSS)

#17 Button Flip

Author

Alex Moore

Tech-Stack

HTML, CSS (SCSS)

#18 Swipe Right Button

Author

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

Author

David Conner

Tech-Stack

HTML, CSS (SCSS)

#22 CSS Button Effect: Animated Border & Glow

Tech-Stack

HTML, CSS

#23 CSS Button Hover

Author

Imran Pardes

Tech-Stack

HTML, CSS

#24 Still in View

Author

Alex Bodin

Tech-Stack

HTML, CSS

#25 Pure CSS Button with Ring Indicator

Author

Cole McCombs

Tech-Stack

HTML, CSS

#26 Button Hover Effects

Author

Kyle Brumm

Tech-Stack

HTML, CSS (SCSS), JS

#27 Button bubble effect

Author

Adrien Grsmto

Tech-Stack

HTML, CSS (SCSS), JS

#28 Animation Submit Button

Tech-Stack

HTML, CSS (SCSS), JS

#29 Who doesn’t like Fun Buttons?

Author

Derek Morash

Tech-Stack

HTML, CSS (SCSS)

#30 Flipside

Tech-Stack

HTML, CSS (SCSS), JS

#31 Squishy Toggle Buttons

Author

Justin Windle

Tech-Stack

HTML, CSS (Sass)

#32 Button hover effect with box-shadow

Author

Giana

Tech-Stack

HTML, CSS (SCSS)

#33 Submit Button (Anime.js)

Author

Andrew Millen

Tech-Stack

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

#34 CSS Button Animation

Author

Sasha

Tech-Stack

HTML (Pug), CSS (SCSS), JS

#35 CSS Button on Plaid

Author

Marcus Connor

Tech-Stack

HTML, CSS

#36 CSS button with bubbles

Author

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

Author

Alex Loomer

Tech-Stack

HTML, CSS

#41 CSS Button with Hover Effect

Author

Kniw Studio

Tech-Stack

HTML, CSS

#42 Button Practice

Author

Ivan Villa

Tech-Stack

HTML, CSS (SCSS)

#43 CSS Button Design Animation

Tech-Stack

HTML, CSS

#44 Six pure CSS Button Hover Animations

Author

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

Author

Aaron Iker

Tech-Stack

HTML, CSS (SCSS), JS (gsap)

#50 Liquid button

Author

Waaark

Tech-Stack

HTML, CSS, JS (jQuery)

#51 Awesome Buttons

Author

Astitva2009

Tech-Stack

HTML, CSS

#52 Awesome Button Hover Effect

Author

Devang Bajpai

Tech-Stack

HTML, CSS

#53 CSS Button Hover Effect INK

Author

morgasmatron

Tech-Stack

HTML, CSS (SCSS)

#54 Button hover with slide animation

Author

Ajeet Kumar

Tech-Stack

HTML, CSS

#55 70s CSS Button

Author

halvo

Tech-Stack

HTML, CSS

#56 Button Love #4 – 2019

Author

punit chawla

Tech-Stack

HTML, CSS (SCSS)

#57 CSS Button Animation

Tech-Stack

HTML, CSS, JS

#58 CSS Button Pending/Success/Fail Animation

Author

Felix M.

Tech-Stack

HTML, CSS (SCSS), JS (Babel)

#59 CSS Button transitions

Author

Robin Treur

Tech-Stack

HTML, CSS (SCSS)

#60 Neon Buttons

Author

Np|Nihad Pasa

Tech-Stack

HTML, CSS

#61 Pure CSS button hover animation

Author

afa

Tech-Stack

HTML, CSS (SCSS)

#62 Home Button Hover Effect #03

Author

Eslam

Tech-Stack

HTML, CSS

#63 Css Button Hover #1 – Stretchable Button

Author

thelaazyguy

Tech-Stack

HTML, CSS

#64 Supah Awesome CSS Button

Author

Kyle Lavery

Tech-Stack

HTML, CSS (SCSS)

#65 Pure CSS Button fill effects

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:

Related Posts
Join the Conversation

19 Comments

  1. potters harri says:

    ok

  2. Imane says:

    this is so creative, so gratful !!

  3. بلکا says:

    These are some great examples and best part is some of the are pure CSS. Thank you for the collection.

  4. Cowpoke says:

    You give awesome button css example, this is tutorial that i need.Hi, thank you.

  5. This is the biggest collection of animated buttons, I have seen so far! 

    1. there are better ones out there says:

      no.

  6. 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/,

  7. wings io says:

    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!

    1. Lorenz says:

      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 🙂

  8. These are some great examples and best part is some of the are pure CSS. Thank you for the collection.

  9. Lorenz says:

    Thank you so much! 🙂

Your email address will not be published. Required fields are marked *

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

This can also interest you