59 Free CSS Buttons

Collection of free, hand-picked CSS Buttons. It will be updated with two new buttons on July 20, 2023.

Welcome to our eye-catching collection of free CSS button samples! Each of the examples presented here has been skillfully created using HTML and CSS, giving you many ideas for your web design projects.

These CSS buttons will grab your attention, whether you’re a front-end developer, a web designer, or just someone who is curious about them. Our collection includes a variety of themes ideal for various online apps, from elegant, minimalistic layouts to colorful, dynamic ones.

Author

  • Luke Meyrick

Made with

  • Pug / SCSS

Created on

  • June 23,2021

Updated on

  • June 27,2021

About the Code

Psychedelic Buttons

Useful Links:Live Demo | Download
Dependency:

Author

  • Luke Meyrick

Made with

  • Pug / SCSS

Created on

  • June 19,2021

Updated on

  • June 21,2021

About the Code

CSS Skateboard

Useful Links:Live Demo | Download
Dependency:
Demo image:https://www.w3tweaks.com/wp-content/uploads/2023/07/css-button-growing-button.gif

Author

  • r8n5n

Made with

  • HTML / CSS

Created on

  • September 23,2013

Updated on

  • September 23,2013

About the Code

CSS Button Rollover – Growing border

The button with the border expands on rollover. CSS Button Rollover – growing border developed using only CSS and HTML. Demo and download available.

Useful Links:Live Demo | Download
Dependency:
Demo image:https://www.w3tweaks.com/wp-content/uploads/2023/07/generic-css-button-kit.gif

Author

  • Phil Hoyt

Made with

  • HTML / CSS

Created on

  • February 03,2014

Updated on

  • February 03,2014

About the Code

Generic CSS Button Kit

Generic CSS Button Kit developed using only CSS and HTML. Demo and download available.

Useful Links:Live Demo | Download
Dependency:
Demo image:https://www.w3tweaks.com/wp-content/uploads/2023/07/colorful-css-button.gif

Author

  • Pali Madra

Made with

  • HTML / CSS

Created on

  • June 24,2014

Updated on

  • June 24,2014

About the Code

Colorful CSS Buttons

Pure CSS buttons are developed using only CSS and HTML. The button has multi-color options.

Useful Links:Live Demo | Download
Dependency:

CSS button hover effect

 

Author

  • Julia

Made with

  • HTML / CSS

Created on

  • FEBRUARY 14, 2017

Updated on

  • SEPTEMBER 25, 2017

About the Code

tags: button, hover, simple, design, material

Useful Links: More info | Live Demo

Dependency: –


CSS Button Hover

 

Author

  • Imran Pardes

Made with

  • HTML / CSS

Created on

  • July 8, 2018

Updated on

  • OCTOBER 26, 2018

About the Code

Pure CSS button. (Tags: CSS, button, animation, SVG, hover)

Useful Links: More info | Live Demo

Dependency: –


Pure CSS loading animation for buttons

Pure CSS loading animation for buttons
Demo Image: Pure CSS loading animation for buttons

A simple test with pure CSS loading animation for buttons (uses jQuery to toggle class).

Author:

 

Robin

Created:

 

JANUARY 30, 2015

Made with:

 

HTML, CSS and JavaScript

Shifting Material Button Modal

Shifting Material Button Modal

 

Demo Image: Shifting Material Button Modal

Two call-to-action buttons that give context to your modals in a Material Design fashion.

Author:

 

Ettrics

Created:

 

MARCH 18, 2015

Made with:

 

HTML, CSS and JavaScript

Button with Built-in Loading Indicator -JS and SCSS

Button with Built-in Loading Indicator -JS and SCSS

 

Demo Image: Button with Built-in Loading Indicator -JS and SCSS

Button with Built-in Loading Indicator

Author:

 

Elior Tabeka

Created:

 

AUGUST 15, 2016

Made with:

 

HTML, CSS and JavaScript

Simple CSS buttons for Disabled Buttons

Simple CSS for Disabled Buttons

 

Demo Image: Simple CSS for Disabled Buttons

For browsers that support CSS3, there’s a simple cursor available to help users understand certain elements that may be disabled due to page logic. So, if you have a button that becomes enabled only after a certain page action is taken (like filling out a form), you can use cursor: not-allowed to reinforce the state using the mouse pointer.

Author:

 

Scott Dawson

Created:

 

MARCH 19, 2013

Made with:

 

HTML, CSS

Submit button loader after submit

Submit button loader after submit

 

Demo Image: Submit button loader after submit

Submit button with loader after submit. No CSS Keyframes, all one JS timeline + SVG.

Author:

 

auginator

Created:

 

AUGUST 05, 2014

Made with:

 

HTML, CSS and JavaScript

Button animation practice

SVG Button hover effect with snap.svg

SVG Button hover effect with snap.svg

 

Demo Image: SVG Button hover effect with snap.svg

Simple button hover effect by replacing the text in a button with an svg element which mimics the button in order to create an effect which can not (easily?) be done with css.

Author:

 

Joost Kiens

Created:

 

JULY 12, 2017

Made with:

 

HTML, CSS and JavaScript

Gradient Button with translate

Gradient Button

 

Demo Image: Gradient Button

Gradient button with translate on hover

Author:

 

Eric Grucza

Created:

 

APRIL 08, 2015

Made with:

 

HTML, CSS

3D Paper button effects

3D Paper button effects

 

Demo Image: 3D Paper button effects

Try out and illustrate some of the subtle button effects you can create just using box-shadow and borders on pseudo–elements. Tested in latest Chrome and Firefox, but no reason it shouldn’t work in all latest browsers.

Author:

 

Ashley Nolan

Created:

 

JULY 15, 2014

Made with:

 

HTML, CSS

Button Hover States

Button Hover States

 

Demo Image: Button Hover States

Snazzy CSS hover states for a button.

Author:

 

James Power

Created:

 

MAY 15, 2015

Made with:

 

HTML, CSS

Button Hover Effects

Button Hover Effects

 

Demo Image: Button Hover Effects

Some button hover effects using psuedo elements and borders.

Author:

 

Kyle Brumm

Created:

 

NOVEMBER 23, 2014

Made with:

 

HTML, CSS and JavaScript

Pulsing Button

Pulsing Button

 

Demo Image: Pulsing Button

Pulsing button using css3 keyframe animation.

Author:

 

Sean Michael

Created:

 

JULY 24, 2013

Made with:

 

HTML, CSS

Twitter Button Concept using only CSS

Twitter Button Concept using only CSS

 

Demo Image: Twitter Button Concept using only CSS

Nice twitter button with door open like concept

Author:

 

Bennett Feely

Created:

 

JANUARY 15, 2013

Made with:

 

HTML, CSS

Some simple buttons

some simple buttons

 

Demo Image: some simple buttons

Just some simple buttons

Author:

 

Ottis Kelleghan

Created:

 

JUNE 15, 2013

Made with:

 

HTML, CSS and JavaScript

Button using :after and box-shadow

Button using :after and box-shadow

 

Demo Image: Button using :after and box-shadow

Hover Buttons which look good, feel good and work good. This requires only CSS. Pure CSS button fun, no strings attached – Just Hover and appreciate!

Author:

 

punit chawla

Created:

 

JANUARY 21, 2019

Made with:

 

HTML, CSS

Purely CSS Button

Purely CSS Button

 

Demo Image: Purely CSS Button

Amazing and powerful the CSS Check-Box Hack is. No JS in this button!

Author:

 

Jorge Reyes

Created:

 

JANUARY 22, 2019

Made with:

 

HTML, CSS

The radio button highlight Underground

Underground radios

 

Demo Image: Underground radios

The radio button highlight travels underground

Author:

 

Mikael Ainalem

Created:

 

JANUARY 15, 2019

Made with:

 

HTML, CSS

3D Retro Buttons

3D Retro Buttons

 

Demo Image: 3D Retro Buttons

3D push buttons with a retro style and font. The first button is a push button that pushes to the center and tilts left or right based on the cursor’s location while hovering. It is styled similar to an old-school game console button. These buttons have been configured with a sm, md, lg size classes along with bootstrap-esque classes such as primary, secondary, danger, warning, success and info. Second button is a loader button with it’s own progress bar when pushed. It only pushes in the center, but then opens upwards to show a progress bar on it’s front side. It will either show a checkmark or X when finished based on success of action.

Author:

 

Mike @ Titan Global Tech

Created:

 

AUGUST 06, 2018

Made with:

 

HTML, CSS and JavaScript

Animated CSS Button

Animated CSS Button

 

Demo Image: Animated CSS Button

First take on newest CodePen challenge. Animated button in Sass

Author:

 

Anno H.

Created:

 

JANUARY 09, 2019

Made with:

 

HTML, CSS

Custom Checkbox and radio button Checklists

Custom Checkbox and radio button Checklists

 

Demo Image: Custom Checkbox and radio button Checklists

Custom Checklists Step-by-Step Guide. Have demo for both radio and checkbox custom tutorial and demo

Author:

 

Brandon McConnell

Created:

 

APRIL 25, 2018

Made with:

 

HTML, CSS and JavaScript

Progress Button Microinteractions

Progress Button Microinteractions

 

Demo Image: Progress Button Microinteractions

Made an example button for uploading with microinteraction.

Author:

 

Takane Ichinose

Created:

 

JANUARY 08, 2019

Made with:

 

HTML, CSS and JavaScript

Slidey radios

Slidey radios (swappy radios remix)

 

Demo Image: Slidey radios (swappy radios remix)

A less-weird-but-still-weird remix of ‘Swappy radios’

Author:

 

Liam

Created:

 

JANUARY 05, 2019

Made with:

 

HTML, CSS and JavaScript

Transitional Buttons using only CSS

Angularjs Material floating button directive

Angularjs Material floating button directive

 

Demo Image: Angularjs Material floating button directive

Customizable, semantic Material design floating action menu with buttons, implemented as an Angularjs directive. Also available in vanilla html.

Author:

 

nobitagit

Created:

 

DECEMBER 15, 2014

Made with:

 

HTML, CSS and JavaScript

CSS3 Rounded Buttons

CSS3 Rounded Buttons

 

Demo Image: CSS3 Rounded Buttons

CSS3 Rounded Buttons developed using css and html

Author:

 

Burak Kaya

Created:

 

DECEMBER 10, 2012

Made with:

 

HTML, CSS and JavaScript

CSS3 3d flip button

CSS3 3d flip button

 

Demo Image: CSS3 3d flip button

CSS3 button w/ 3d transform using no JS, no imgs, and No icon-fonts

Author:

 

Sean Michael

Created:

 

SEPTEMBER 21, 2013

Made with:

 

HTML, CSS

3D Parallax Buttons

3D Parallax Buttons

 

Demo Image: 3D Parallax Buttons

3D pushable buttons with a real perspective and a parallax-like effect when scrolling. Made with CSS 3D transforms.

Author:

 

Alexander Futekov

Created:

 

MAY 08, 2013

Made with:

 

HTML, CSS and JavaScript

Topcoat Button Bar

Topcoat Button Bar

 

Demo Image: Topcoat Button Bar

Default style for Topcoat Button Bar. Requirements are portable and accessible markup with flexible and performant css. No javascript required

Author:

 

Topcoat

Created:

 

AUGUST 07, 2013

Made with:

 

HTML, CSS

Hand-Drawn Border Buttons

Hand-Drawn Border Buttons

 

Demo Image: Hand-Drawn Border Buttons

“Hand-Drawn” border effect on buttons w/CSS border-radius. FYI: There is a bug when rendering the dotted / dashed borders in FF. Rendering solid borders in FF is fine.

Author:

 

Tiffany Rayside

Created:

 

FEBRUARY 15, 2016

Made with:

 

HTML, CSS

Colorful CSS Buttons

Colorful CSS Buttons

 

Demo Image: Colorful CSS Buttons

A collection of various types of CSS buttons in various colors.

Author:

 

Chris Deacy

Created:

 

MAY 04, 2015

Made with:

 

HTML, CSS

Button bubble effect

Button bubble effect

 

Demo Image: Button bubble effect

A hover effect using the gooey tricks.

Author:

 

Adrien Grsmto

Created:

 

JUNE 30, 2015

Made with:

 

HTML, CSS and JavaScript

CSS-only Custom Radio Buttons

CSS only Custom Radio Buttons

 

Demo Image: CSS only Custom Radio Buttons

Based on the webdesign tuts+ article (link below) but instead of using images I used only css.

Author:

 

Mitch McCline

Created:

 

MAY 13, 2013

Made with:

 

HTML, CSS and JavaScript

Flyaway Send Button

Flyaway Send Button

 

Demo Image: Flyaway Send Button

A basic CSS animation that makes a paper airplane fly out of this “Send” button when clicked.

Author:

 

Adrian Del Balso

Created:

 

JUNE 18, 2014

Made with:

 

HTML, CSS and JavaScript

Bubbly Button with click effect

Bubbly Button with click effect

 

Demo Image: Bubbly Button with click effect

Made the bubbles using “radial-gradient” for background-image. I believe this property is so cool that you can draw many things without adding extra divs or pseudo elements (::before and ::after)

Author:

 

Nour Saud

Created:

 

JANUARY 20, 2018

Made with:

 

HTML, CSS and JavaScript

3D flip button

3D flip button

 

Demo Image: 3D flip button

Prototype for 3D flip button.

Author:

 

Rik Schennink

Created:

 

JUNE 07, 2013

Made with:

 

HTML, CSS and JavaScript

Sign-post arrow buttons

Sign-post arrow buttons

 

Demo Image: Sign-post arrow buttons

Sass mixin for creating arrow buttons. Uses transform: skew on pseudo-elements. CSS arrow buttons

Author:

 

Giana

Created:

 

AUGUST 09, 2015

Made with:

 

HTML, CSS

Button hover effects with box-shadow

Button hover effects with box-shadow

 

Demo Image: Button hover effects with box-shadow

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

Author:

 

Giana

Created:

 

JUNE 04, 2017

Made with:

 

HTML, CSS

Organic Button

Organic Button

 

Demo Image: Organic Button

Elastic button, has pounding hearth for loading animation, will burst into ready state once done.

Author:

 

Rik Schennink

Created:

 

MARCH 12, 2014

Made with:

 

HTML, CSS and JavaScript

CSS3 Button Hover Effects with FontAwesome

CSS3 Button Hover Effects with FontAwesome

 

Demo Image: CSS3 Button Hover Effects with FontAwesome

Pure CSS3 Button Hover Effects

Author:

 

fox_hover

Created:

 

APRIL 04, 2017

Made with:

 

HTML, CSS

Activate Button animation

Creative Buttons using just CSS

Creative Buttons using just CSS

 

Demo Image: Creative Buttons using just CSS

Creative Buttons using just CSS. Can be converted to SCSS for flexibility

Author:

 

Nathan Schmidt

Created:

 

MARCH 08, 2018

Made with:

 

HTML, CSS

CSS button with different transition effects

CSS button with different transition effects

 

Demo Image: CSS button with different transition effects

CSS Button with different on hover transition effects developed using css and html.

Author:

 

Robin Treur

Created:

 

DECEMBER 03, 2015

Made with:

 

HTML, CSS

Button Hover Effects

20 Button Hover Effects

 

Demo Image: 20 Button Hover Effects

CSS Button with 20 diffrent hover animation effects developed using css and html.

Author:

 

Rosa

Created:

 

OCTOBER 27, 2016

Made with:

 

HTML, CSS

CSS Button with Angled Sides

CSS Button with Angled Sides

 

Demo Image: CSS Button with Angled Sides

CSS Button with Angled Sides developed using only css and html.

Author:

 

Peter Hrynkow

Created:

 

JANUARY 09, 2013

Made with:

 

HTML, CSS

CSS Buttons with animations

CSS Buttons with animations

 

Demo Image: CSS Buttons with animations

CSS Buttons with different animations reactions

Author:

 

Rémi Lacorne

Created:

 

JULY 16, 2013

Made with:

 

HTML, CSS

Six Pure CSS Button Hover Animations

 Six Pure CSS Button Hover Animations

 

Demo Image: Six Pure CSS Button Hover Animations

Six Pure CSS Button Hover Animations

Author:

 

Christian

Created:

 

JULY 22, 2016

Made with:

 

HTML, CSS

Very creative CSS Buttons | Depth Effect

Very creative CSS Buttons | Depth Effect

 

Demo Image: Very creative CSS Buttons | Depth Effect

Very creative CSS Buttons | Depth Effect. Developed using css, html and javascript

Author:

 

Praveen Bisht

Created:

 

NOVEMBER 28, 2017

Made with:

 

HTML, CSS and JavaScript

Next & Prev CSS buttons

Next & Prev CSS buttons

 

Demo Image: Next & Prev CSS buttons

Next & Prev CSS buttons.CSS buttons for next and previous button for sliders, or whatever.

Author:

 

Andréas Lundgren

Created:

 

MARCH 04, 2013

Made with:

 

HTML, CSS

Simple CSS Button Hover Effect

Simple CSS Button Hover Effect

 

Demo Image: Simple CSS Button Hover Effect

Simple CSS Button Hover Effect. Simple, but good looking :hover and :active transition for buttons and links styled as buttons.

Author:

 

Andréas Lundgren

Created:

 

JUNE 01, 2016

Made with:

 

HTML, CSS and JavaScript

CSS button transitions

CSS Button Animations

 

Demo Image: CSS Button Animations

CSS Button Animations styles.Playing around with some CSS button transitions. Possible repo for future use. Learning experience for me dealing with browser compatibility.

Author:

 

Alex Loomer

Created:

 

FEBRUARY 07, 2017

Made with:

 

HTML, CSS

Free Bootstrap CSS Buttons

 Free Bootstrap CSS Buttons

 

Demo Image: Free Bootstrap CSS Buttons

Bootstrap-free CSS Buttons.A pure CSS button style that you can put on anchor tags, buttons, inputs, & labels. Demo and download available.

Author:

 

Tommy Hodgins

Created:

 

JANUARY 27, 2017

Made with:

 

HTML, CSS

Enlarge button effect on hover

Enlarge button effect on hover

 

Demo Image: Enlarge button effect on hover

Button zoom effect on hover. CSS Button enlarge effect using only css and html. Demo and download available.

Author:

 

sasha

Created:

 

JANUARY 27, 2017

Made with:

 

HTML, CSS

W3TWEAKS
Latest posts by W3TWEAKS (see all)