Button is meant to direct users into taking the action you want them to take. If you are looking for some CSS buttons to use in a website project, here are 20 cool and modern CSS buttons that will save you time and effort in creating effective buttons that improves the user experience.

Viavi

It is pure HTML5/CSS3 flat buttons. Buttons has HTML5 structure and works on all major browsers. Buttons is easy to edit and integrate into any website. CSS is separate from HTML and is well commented.

Bttn.css

Awesome buttons for awesome projects!

Distorted Button Effects

A set of inspirational, highly experimental distortion effects for buttons using SVG filters. By Adrien Denat.

Buttons

Simple button styles to kickstart you webdesign!

Social Likes Next

Modern social share buttons. All in the same style, no jQuery, Retina, IE11+.

Imperfect Buttons

“Hand-Drawn” border effect on buttons w/CSS border-radius.

Hover Effects

Some button hover effects using psuedo elements and borders.

Mybutton

Modern CSS3 buttons collections. It’s have 24+ buttons and 3 social button styles. It’s used standard CSS3 technology possible to huge combinations. You can use this button on your project easily.

Bootstrap Responsive Button

Flat design Bootstrap buttons. Easy customization.Support Font Awesome icon. Crossbrowser supported and Responsive. Up to 50 colors, 2 different shapes.

Fancy Buttons

Fancy Buttons are made with HTML & CSS3, Retina ready, Crossbrowser supported and Responsive. Up to 16 colors, 16 pure CSS3 combinable animations, 4 different shapes and 4 different sizes. All of them can be combined together.

Material Buttons

No JavaScript required!. You can easily edit, change and customize them for yourself.

Rotating Icon Buttons

Hover over the buttons to see the colors invert, the icon rotate, and the border grow from within the button.

CSS BUTTONS!!

Inspiration for new ways to make interactive buttons using linear-gradients, box-shadows, and pseudo classes!

Contact button

Contact button from dribbble shot. Only for fun.

Material Design

Script automatically adds the material design effect to elements with ‘material-design’ class. Can also be used on div with images. Add the preferred color as value of the ‘data-color’ attribute.

Buttons css hover effect

These are nice, and would be even cooler if they used transforms for the hover effect!

Fireworks Button

Just some other awesome CSS3 buttons.

Animated background

Buttons with pattern animation hover effect in CSS.

Hover Animation

Random button animation created in a single HTML element for fun.

Obvious Buttons

These buttons offer a Bootstrap alternative between the gradient-opinionated 2.0 and the completely-flat 3.0. They are also distinguished for getting pressed on click, like real buttons do.