85+ CSS Buttons

top-css-buttons

Looking for a CSS button style for your website? Perfect! You have come to the right place! Check out this huge collection of CSS buttons and simply copy the ones you like.

Whether big and bold on your home page or small and discreet in the footer, CSS buttons are a very important design element in the user experience of 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. To cater for all industries, you will find many different button styles here.

I – and many other web developers/designers – also like animations for hover or focus, which is why all the following buttons have nice animations. But now, let’s get started!

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

Coded with
HTML, CSS

#2 Rounded Button

Author
alticreation

Coded with
HTML, CSS (SCSS)

#3 Blubby Button

Author
Nour Saud

Coded with
HTML, CSS

#4 Icon buttons

Author
Andrea Maselli

Coded with
HTML, CSS

#5 Blobs button

Author
Hilary

Coded with
HTML, CSS (SCSS)

#6 Thin Buttons

Author
Natalia Reshetnikova

Coded with
HTML, CSS

#7 Bootstrap Buttons

Author
dew31794

Coded with
HTML, CSS (SCSS), JS

#8 Rounded Pulse Button

Author
Raj Kamal

Coded with
HTML, CSS (SCSS)

#9 CSS Fizzy Button

Author
Jürgen Leister

Coded with
HTML (Haml), CSS (SCSS)

#10 Button N° 045

Author
Vitor Siqueira

Coded with
HTML, CSS

#11 Flush button

Author
AbhishekBaiju

Coded with
HTML, CSS

#12 Button Concept

Author
Shyam

Coded with
HTML, CSS (SCSS), JS (CoffeeScript)

#13 Sliced Button

Author
Sarah

Coded with
HTML, CSS

#14 More fancy Icon buttons

Author
Ishaan Saxena

Coded with
HTML (Pug), CSS (SCSS)

#15 Button Change

Author
thelaazyguy

Coded with
HTML, CSS

#16 Simple Button

Author
Tiberiu Raducea

Coded with
HTML, CSS (SCSS)

#17 Button Flip

Author
Alex Moore

Coded with
HTML, CSS (SCSS)

#18 Swipe Right Button

Author
thelaazyguy

Coded with
HTML, CSS

#19 Fancy Buttons

Author
Alexandre do Vale

Coded with
HTML, CSS, JS

#20 FlipCover Buttons

Author
Velina V Veleva

Coded with
HTML, CSS (SCSS), JS

#21 Collection of Button Hover Effects

Author
David Conner

Coded with
HTML, CSS (SCSS)

#22 CSS Button Effect: Animated Border & Glow

Author
Blade Multimedia

Coded with
HTML, CSS

#23 CSS Button Hover

Author
Imran Pardes

Coded with
HTML, CSS

#24 Still in View

Author
Alex Bodin

Coded with
HTML, CSS

#25 Pure CSS Button with Ring Indicator

Author
Cole McCombs

Coded with
HTML, CSS

#26 Button Hover Effects

Author
Kyle Brumm

Coded with
HTML, CSS (SCSS), JS

#27 Button bubble effect

Author
Adrien Grsmto

Coded with
HTML, CSS (SCSS), JS

#28 Animation Submit Button

Author
Valentin Galmand

Coded with
HTML, CSS (SCSS), JS

#29 Who doesn’t like Fun Buttons?

Author
Derek Morash

Coded with
HTML, CSS (SCSS)

#30 Flipside

Author
Hakim El Hattab

Coded with
HTML, CSS (SCSS), JS

#31 Squishy Toggle Buttons

Author
Justin Windle

Coded with
HTML, CSS (Sass)

#32 Button hover effect with box-shadow

Author
Giana

Coded with
HTML, CSS (SCSS)

#33 Submit Button (Anime.js)

Author
Andrew Millen

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

#34 CSS Button Animation

Author
Sasha

Coded with
HTML (Pug), CSS (SCSS), JS

#35 CSS Button on Plaid

Author
Marcus Connor

Coded with
HTML, CSS

#36 CSS button with bubbles

Author
Giana

Coded with
HTML, CSS (SCSS)

#37 jQuery +3D css button

Author
Carlos G Notario

Coded with
HTML, CSS, JS (jQuery)

#38 Pure CSS button switch

Author
Kitty Giraudel

Coded with
HTML, CSS (SCSS)

#39 Creative Button Hover Collection

Author
Yasin Softaoğlu

Coded with
HTML, CSS

#40 CSS Button Animations

Author
Alex Loomer

Coded with
HTML, CSS

#41 CSS Button with Hover Effect

Author
Kniw Studio

Coded with
HTML, CSS

#42 Button Practice

Author
Ivan Villa

Coded with
HTML, CSS (SCSS)

#43 CSS Button-Neon Shadow with Animation

Author
ps173

Coded with
HTML, CSS

#44 Six pure CSS Button Hover Animations

Author
Christian

Coded with
HTML, CSS

#45 3D CSS BUTTON

Author
SULEMANS CODES

Coded with
HTML, CSS, JS

#46 70s CSS Button

Author
Jordan Halvorsen

Coded with
HTML, CSS

#47 100 days css Button N° 045

Author
Vitor Siqueira

Coded with
HTML, CSS

#48 Button Hover

Author
Katherine Kato

Coded with
HTML, CSS (SCSS)

#49 Download Button Animation

Author
Aaron Iker

Coded with
HTML, CSS (SCSS), JS (gsap)

#50 Liquid button

Author
Waaark

Coded with
HTML, CSS, JS (jQuery)

#51 Awesome Buttons

Author
Astitva2009

Coded with
HTML, CSS

#52 Awesome Button Hover Effect

Author
Devang Bajpai

Coded with
HTML, CSS

#53 Button Love #4 – 2019

Author
punitweb

Coded with
HTML, CSS (SCSS)

#54 Button hover with slide animation

Author
Ajeet Kumar

Coded with
HTML, CSS

#55 70s CSS Button

Author
halvo

Coded with
HTML, CSS

#56 Button Love #4 – 2019

Author
punit chawla

Coded with
HTML, CSS (SCSS)

#57 CSS Button Animation

Author
Yohaan Chokhany

Coded with
HTML, CSS, JS

#58 CSS Button Pending/Success/Fail Animation

Author
Felix M.

Coded with
HTML, CSS (SCSS), JS (Babel)

#59 CSS Button transitions

Author
Robin Treur

Coded with
HTML, CSS (SCSS)

#60 Neon Buttons

Author
Np|Nihad Pasa

Coded with
HTML, CSS

#61 Pure CSS button hover animation

Author
afa

Coded with
HTML, CSS (SCSS)

#62 Home Button Hover Effect #03

Author
Eslam

Coded with
HTML, CSS

#63 Css Button Hover #1 – Stretchable Button

Author
thelaazyguy

Coded with
HTML, CSS

#64 Supah Awesome CSS Button

Author
Kyle Lavery

Coded with
HTML, CSS (SCSS)

#65 Pure CSS Button fill effects

Author
Pieter Biesemans

Coded with
HTML, CSS (SCSS)

#66 CSS Button Hovers

Author
MitchES

Coded with
HTML, CSS

#67 CSS button ripple

Author
pjwdev

Coded with
HTML, CSS

#68 Pure CSS button hover animation

Author
afa34

Coded with
HTML, CSS (SCSS)

#69 Pure CSS button switch

Author
seyedi

Coded with
HTML, CSS

#70 3D CSS Buttons

Author
kanishkkunal

Coded with
HTML, CSS

#71 CodePen Home Button Hover Effect #05

Author
Eslam_Refa3y

Coded with
HTML, CSS

#72 CSS button hover effect

Author
sfoxy

Coded with
HTML, CSS

#73 20 Button Hover Effects

Author
RRoberts

Coded with
HTML, CSS

#74 Simple CSS Button

Author
designil

Coded with
HTML, CSS

#75 CSS Button with Glowing Background

Author
dhanishgajjar

Coded with
HTML, CSS

#76 Button Hover Effects

Author
kjbrum

Coded with
HTML, CSS (SCSS), jQuery

#77 CSS Button

Author
matthewmorete

Coded with
HTML, CSS (SCSS)

#78 CSS Button Border Animation on Hover

Author
ricoJei8ht

Coded with
HTML, CSS

#79 CSS – button animation

Author
Amerey

Coded with
HTML, CSS (SCSS)

#80 CSS Button with ring indicator effect

Author
Raza-the-bashful

Coded with
HTML, CSS

#81 Moving border

Author
Kyon-Jordan

Coded with
HTML, CSS

#82 Disturbed button

Author
milad-ahmadipour

Coded with
HTML, CSS

#83 Glowing rainbow pulsant

Author
Mattia-Abate

Coded with
HTML, CSS

#84 Simple AF

Author
Fatima-khondoker

Coded with
HTML, CSS

#85 Animated CSS Buttons)

Author
Yashi-Singh

Coded with
HTML, CSS

#86 Simple Button

Author
izar23

Coded with
HTML, CSS

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.

See also my other CSS collections:

Related Posts
Join the Conversation

20 Comments

  1. Dekmer says:

    Nice!

  2. potters harri says:

    ok

  3. Imane says:

    this is so creative, so gratful !!

  4. بلکا says:

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

  5. Cowpoke says:

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

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

    1. there are better ones out there says:

      no.

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

  8. 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 🙂

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

  10. 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