20 Cool CSS Buttons 2017

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.


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.

Viavi CSS3 Button Hover Effect


Awesome buttons for awesome projects!


Distorted Button Effects

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

Distorted Button Effects with SVG Filters


Simple button styles to kickstart you webdesign!


Social Likes Next

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

Social Likes Next

Imperfect Buttons

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

Hand-Drawn Border Buttons

Hover Effects

Some button hover effects using psuedo elements and borders.

hover effects


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.

Bootstrap Responsive Button

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.

Fancy Buttons

Material Buttons

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

Material Buttons

Rotating Icon Buttons

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

Rotating Icon 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.

Contact button

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.

Material Design Buttons

Buttons css hover effect

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

Buttons css hover effect

Fireworks Button

Just some other awesome CSS3 buttons.

Nice and quick, love it.

Animated background

Buttons with pattern animation hover effect in CSS.


Hover Animation

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

Button Hover Animation

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.

Obvious Buttons


  1. Ernefullsays:

    Very good. Thank you….

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.