Collection of hand-picked free HTML and CSS button libraries and collections.

  1. CSS Buttons
  2. CSS Button Hover Effects
  3. CSS 3D Buttons
  4. CSS Submit Buttons
  5. CSS Gradient Buttons
  6. CSS Flat Buttons
  7. CSS Close Buttons
  8. CSS Download Buttons
  9. CSS Play/Pause Buttons
  10. CSS Button Click Effects

Creator

  • Kamil Kuklinski

Programming language

  • HTML / CSS (SCSS)

Information the code

Hover Buttons

Animated CSS/SCSS buttons.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Giana

Programming language

  • HTML / CSS (SCSS)

Information the code

Simple Hover Effects with box-shadow

Making some basic animations with box-shadows. No extra elements or even pseudo elements required.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • bknds

Programming language

  • HTML / CSS

Information the code

flower.css

A button CSS framework.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Ganapati V S

Programming language

  • HTML / CSS (Stylus)

Information the code

bttn.css

Awesome buttons for awesome projects!

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Adrien Denat

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Distorted Button Effects with SVG Filters

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: tweenmax.js

Creator

  • Mary Lou

Programming language

  • HTML / CSS

Information the code

Inspiration for Button Styles and Effects

A collection of fresh button styles and effects for your inspiration. We use CSS transitions and pseudo-elements for most of the effects.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Mary Lou

Programming language

  • HTML / CSS / JavaScript

Information the code

Progress Button Styles

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Mary Lou

Programming language

  • HTML / CSS

Information the code

Creative Button Styles

Some creative and modern button styles and effects for your inspiration.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: