Collection of free HTML and CSS button libraries

Browse a collection of free HTML and CSS button libraries to access a variety of pre-designed and customizable buttons for your website.

CSS Buttons

CSS Buttons

Author:
Design and Code | October 2, 2022
Made with:
HTML / CSS

About a code

A collection of simple and subtle CSS-only hover animations for buttons.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
UI Buttons

UI Buttons

Author:
UI Buttons | June 22, 2022
Made with:
HTML / CSS

About a code

100 modern CSS buttons. Every style that you can imagine.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

CSS Button Hover Styles

Author:
Codrops | February 17, 2021
About a code

Some ideas for CSS-only button hover styles and animations.

Buttons. CSS Hover

Author:
Marina Osadcha | April 22, 2020
Made with:
HTML / CSS

About a code

CSS buttons hover effects.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
knopf.css

knopf.css

Author:
Frameable Inc | August 29, 2019
About a code

Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications.

Buttono

Buttono

Author:
Hasan Aydoğdu | February 4, 2018
About a code

Buttono is a Sass mixin based on BEM naming convention. It helps you to create nice buttons in an easy way.

Hover Buttons

Author:
Kamil Kuklinski | July 29, 2017
Made with:
HTML / CSS (SCSS)

About a code

Animated CSS/SCSS buttons.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-

Simple Hover Effects with box-shadow

Author:
Giana | June 4, 2017
Made with:
HTML / CSS (SCSS)

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-

bttn.css

Author:
Ganapati V S | September 26, 2016
Made with:
HTML / CSS (Stylus)

About a code

Awesome buttons for awesome projects!

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-

Distorted Button Effects with SVG Filters

Author:
Adrien Denat | May 11, 2016
Made with:
HTML / CSS (SCSS) / JavaScript

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
tweenmax.js
Buttons

Buttons

Author:
loup-brun | April 26, 2016
About a code

A collection of CSS buttons. The collection includes 26 different button styles.

Inspiration for Button Styles and Effects

Author:
Mary Lou | February 26, 2015
Made with:
HTML / CSS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-

Progress Button Styles

Author:
Mary Lou | December 12, 2013
Made with:
HTML / CSS / JavaScript

About a code

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.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-

Creative Button Styles

Author:
Mary Lou | June 13, 2013
Made with:
HTML / CSS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨