w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Essentials

55 Useful handpicked CSS Buttons with examples and demos

W3TWEAKS by W3TWEAKS
November 4, 2022
in Essentials

In this article, we listed the hand-picked awesome CSS buttons collections developed using only CSS, HTML, JavaScript, etc. Listed tutorials well played with colors, gradients, or shapes. Some of the buttons have beautiful animation effects using transitions. Demo and download available on each tutorial. The button can be used directly without any changes and could be small changes based on your needs.

Article will be helpful for designers and non-coders.

You might also like

Pill Styled Radio ButtonsPill Styled Radio Buttons

Custom radio button using CSS only

December 10, 2020
t-shirt cannon playful animated button concept

T-shirt cannon playful animated button concept

October 13, 2020

Comment your favorite button or comment the button which you admired from external resource.

1) 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).

Tutorial/codes – Demo

Author:

 

Robin

Created:

 

JANUARY 30, 2015

Made with:

 

HTML, CSS and JavaScript

2) 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.

Tutorial/codes – Demo

Author:

 

Ettrics

Created:

 

MARCH 18, 2015

Made with:

 

HTML, CSS and JavaScript

3) 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

Tutorial/codes – Demo

Author:

 

Elior Tabeka

Created:

 

AUGUST 15, 2016

Made with:

 

HTML, CSS and JavaScript

4) 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.

Tutorial/codes – Demo

Author:

 

Scott Dawson

Created:

 

MARCH 19, 2013

Made with:

 

HTML, CSS

5) 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.

Tutorial/codes – Demo

Author:

 

auginator

Created:

 

AUGUST 05, 2014

Made with:

 

HTML, CSS and JavaScript

6) Button animation practice

Button animation practice

 

Demo Image: Button animation practice

Button animation practice

Tutorial/codes – Demo

Author:

 

lichinlin

Created:

 

APRIL 21, 2016

Made with:

 

HTML, CSS and JavaScript

7) 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.

Tutorial/codes – Demo

Author:

 

Joost Kiens

Created:

 

JULY 12, 2017

Made with:

 

HTML, CSS and JavaScript

8) Gradient Button with translate

Gradient Button

 

Demo Image: Gradient Button

Gradient button with translate on hover

Tutorial/codes – Demo

Author:

 

Eric Grucza

Created:

 

APRIL 08, 2015

Made with:

 

HTML, CSS

9) 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.

Tutorial/codes – Demo

Author:

 

Ashley Nolan

Created:

 

JULY 15, 2014

Made with:

 

HTML, CSS

10) Button Hover States

Button Hover States

 

Demo Image: Button Hover States

Snazzy CSS hover states for a button.

Tutorial/codes – Demo

Author:

 

James Power

Created:

 

MAY 15, 2015

Made with:

 

HTML, CSS

11) Button Hover Effects

Button Hover Effects

 

Demo Image: Button Hover Effects

Some button hover effects using psuedo elements and borders.

Tutorial/codes – Demo

Author:

 

Kyle Brumm

Created:

 

NOVEMBER 23, 2014

Made with:

 

HTML, CSS and JavaScript

12) Pulsing Button

Pulsing Button

 

Demo Image: Pulsing Button

Pulsing button using css3 keyframe animation.

Tutorial/codes – Demo

Author:

 

Sean Michael

Created:

 

JULY 24, 2013

Made with:

 

HTML, CSS

13) 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

Tutorial/codes – Demo

Author:

 

Bennett Feely

Created:

 

JANUARY 15, 2013

Made with:

 

HTML, CSS

14) Some simple buttons

some simple buttons

 

Demo Image: some simple buttons

Just some simple buttons

Tutorial/codes – Demo

Author:

 

Ottis Kelleghan

Created:

 

JUNE 15, 2013

Made with:

 

HTML, CSS and JavaScript

15) 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!

Tutorial/codes – Demo

Author:

 

punit chawla

Created:

 

JANUARY 21, 2019

Made with:

 

HTML, CSS

16) 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!

Tutorial/codes – Demo

Author:

 

Jorge Reyes

Created:

 

JANUARY 22, 2019

Made with:

 

HTML, CSS

17) Radio button highlight Underground

Underground radios

 

Demo Image: Underground radios

The radio button highlight travels underground

Tutorial/codes – Demo

Author:

 

Mikael Ainalem

Created:

 

JANUARY 15, 2019

Made with:

 

HTML, CSS

18) 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.

Tutorial/codes – Demo

Author:

 

Mike @ Titan Global Tech

Created:

 

AUGUST 06, 2018

Made with:

 

HTML, CSS and JavaScript

19) Animated CSS Button

Animated CSS Button

 

Demo Image: Animated CSS Button

First take on newest CodePen challenge. Animated button in Sass

Tutorial/codes – Demo

Author:

 

Anno H.

Created:

 

JANUARY 09, 2019

Made with:

 

HTML, CSS

20) 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

Tutorial/codes – Demo

Author:

 

Brandon McConnell

Created:

 

APRIL 25, 2018

Made with:

 

HTML, CSS and JavaScript

21) Progress Button Microinteractions

Progress Button Microinteractions

 

Demo Image: Progress Button Microinteractions

Made an example button for uploading with microinteraction.

Tutorial/codes – Demo

Author:

 

Takane Ichinose

Created:

 

JANUARY 08, 2019

Made with:

 

HTML, CSS and JavaScript

22) Slidey radios (swappy radios remix)

Slidey radios (swappy radios remix)

 

Demo Image: Slidey radios (swappy radios remix)

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

Tutorial/codes – Demo

Author:

 

Liam

Created:

 

JANUARY 05, 2019

Made with:

 

HTML, CSS and JavaScript

23) Transitional Buttons using only CSS

Transitional Buttons

 

Demo Image: Transitional Buttons

Using of transitions in button hover effects.

Tutorial/codes – Demo

Author:

 

Vitaliy

Created:

 

APRIL 15, 2014

Made with:

 

HTML, CSS

24) 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.

Tutorial/codes – Demo

Author:

 

nobitagit

Created:

 

DECEMBER 15, 2014

Made with:

 

HTML, CSS and JavaScript

25) CSS3 Rounded Buttons

CSS3 Rounded Buttons

 

Demo Image: CSS3 Rounded Buttons

CSS3 Rounded Buttons developed using css and html

Tutorial/codes – Demo

Author:

 

Burak Kaya

Created:

 

DECEMBER 10, 2012

Made with:

 

HTML, CSS and JavaScript

26) 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

Tutorial/codes – Demo

Author:

 

Sean Michael

Created:

 

SEPTEMBER 21, 2013

Made with:

 

HTML, CSS

27) 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.

Tutorial/codes – Demo

Author:

 

Alexander Futekov

Created:

 

MAY 08, 2013

Made with:

 

HTML, CSS and JavaScript

28) 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

Tutorial/codes – Demo

Author:

 

Topcoat

Created:

 

AUGUST 07, 2013

Made with:

 

HTML, CSS

29) 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.

Tutorial/codes – Demo

Author:

 

Tiffany Rayside

Created:

 

FEBRUARY 15, 2016

Made with:

 

HTML, CSS

30) Colorful CSS Buttons

Colorful CSS Buttons

 

Demo Image: Colorful CSS Buttons

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

Tutorial/codes – Demo

Author:

 

Chris Deacy

Created:

 

MAY 04, 2015

Made with:

 

HTML, CSS

31) Button bubble effect

Button bubble effect

 

Demo Image: Button bubble effect

A hover effect using the gooey tricks.

Tutorial/codes – Demo

Author:

 

Adrien Grsmto

Created:

 

JUNE 30, 2015

Made with:

 

HTML, CSS and JavaScript

32) 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.

Tutorial/codes – Demo

Author:

 

Mitch McCline

Created:

 

MAY 13, 2013

Made with:

 

HTML, CSS and JavaScript

33) 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.

Tutorial/codes – Demo

Author:

 

Adrian Del Balso

Created:

 

JUNE 18, 2014

Made with:

 

HTML, CSS and JavaScript

34) 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)

Tutorial/codes – Demo

Author:

 

Nour Saud

Created:

 

JANUARY 20, 2018

Made with:

 

HTML, CSS and JavaScript

35) 3D flip button

3D flip button

 

Demo Image: 3D flip button

Prototype for 3D flip button.

Tutorial/codes – Demo

Author:

 

Rik Schennink

Created:

 

JUNE 07, 2013

Made with:

 

HTML, CSS and JavaScript

36) 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

Tutorial/codes – Demo

Author:

 

Giana

Created:

 

AUGUST 09, 2015

Made with:

 

HTML, CSS

37) 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.

Tutorial/codes – Demo

Author:

 

Giana

Created:

 

JUNE 04, 2017

Made with:

 

HTML, CSS

38) Organic Button

Organic Button

 

Demo Image: Organic Button

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

Tutorial/codes – Demo

Author:

 

Rik Schennink

Created:

 

MARCH 12, 2014

Made with:

 

HTML, CSS and JavaScript

39) 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

Tutorial/codes – Demo

Author:

 

fox_hover

Created:

 

APRIL 04, 2017

Made with:

 

HTML, CSS

40) Activate Button animation

Activate Button animation

 

Demo Image: Activate Button animation

Cool Activate and Waiting Button animation using HTML, CSS and JavaScript.

Tutorial/codes – Demo

Author:

 

Aaron Iker

Created:

 

DECEMBER 17, 2018

Made with:

 

HTML, CSS and JavaScript

41) 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

Tutorial/codes – Demo

Author:

 

Nathan Schmidt

Created:

 

MARCH 08, 2018

Made with:

 

HTML, CSS

42) 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.

Tutorial/codes – Demo

Author:

 

Robin Treur

Created:

 

DECEMBER 03, 2015

Made with:

 

HTML, CSS

43) 20 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.

Tutorial/codes – Demo

Author:

 

Rosa

Created:

 

OCTOBER 27, 2016

Made with:

 

HTML, CSS

44) 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.

Tutorial/codes – Demo

Author:

 

Peter Hrynkow

Created:

 

JANUARY 09, 2013

Made with:

 

HTML, CSS

45) CSS Buttons with animations

CSS Buttons with animations

 

Demo Image: CSS Buttons with animations

CSS Buttons with different animations reactions

Tutorial/codes – Demo

Author:

 

Rémi Lacorne

Created:

 

JULY 16, 2013

Made with:

 

HTML, CSS

46) 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

Tutorial/codes – Demo

Author:

 

Christian

Created:

 

JULY 22, 2016

Made with:

 

HTML, CSS

47) 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

Tutorial/codes – Demo

Author:

 

Praveen Bisht

Created:

 

NOVEMBER 28, 2017

Made with:

 

HTML, CSS and JavaScript

48) 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.

Tutorial/codes – Demo

Author:

 

Andréas Lundgren

Created:

 

MARCH 04, 2013

Made with:

 

HTML, CSS

49) 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.

Tutorial/codes – Demo

Author:

 

Andréas Lundgren

Created:

 

JUNE 01, 2016

Made with:

 

HTML, CSS and JavaScript

50) 7 different style 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.

Tutorial/codes – Demo

Author:

 

Alex Loomer

Created:

 

FEBRUARY 07, 2017

Made with:

 

HTML, CSS

51) 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.

Tutorial/codes – Demo

Author:

 

Tommy Hodgins

Created:

 

JANUARY 27, 2017

Made with:

 

HTML, CSS

52) 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.

Tutorial/codes – Demo

Author:

 

sasha

Created:

 

JANUARY 27, 2017

Made with:

 

HTML, CSS

53) CSS Button Rollover – growing border

CSS Button Rollover - growing border

 

Demo Image: CSS Button Rollover – growing border

Button with border expands on rollover. CSS Button Rollover – growing border developed using only css and html. Demo and download available.

Tutorial/codes – Demo

Author:

 

r8n5n

Created:

 

SEPTEMBER 23, 2013

Made with:

 

HTML, CSS

54) Generic CSS Button Kit

Generic CSS Button Kit

 

Demo Image: Generic CSS Button Kit

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

Tutorial/codes – Demo

Author:

 

Phil Hoyt

Created:

 

FEBRUARY 03, 2014

Made with:

 

HTML, CSS

55) Colorful CSS Buttons

55 Useful handpicked CSS Buttons with examples and demos 1

 

Demo Image:

Pure CSS buttons developed using only css and html. Button has multi color options.

Tutorial/codes – Demo

Author:

 

Pali Madra

Created:

 

JUNE 24, 2014

Made with:

 

HTML, CSS

Tags: animationButtonsCollectionCSScss buttonshtmltransitions
Previous Post

CSS button with different transition effects

Next Post

Creative Buttons using just CSS

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Pill Styled Radio ButtonsPill Styled Radio Buttons

Custom radio button using CSS only

by W3TWEAKS
December 10, 2020

Custom radio button style using only CSS (SCSS) by taking advantage of sibling selectors and the :checked psuedo class. See...

t-shirt cannon playful animated button concept

T-shirt cannon playful animated button concept

by W3TWEAKS
October 13, 2020

Your shirt order blasts off from a t-shirt cannon in this playful button concept from Jhey, built with GSAP. See...

chat bubble smoothly morphs into a "close" X

Chat bubble smoothly morphs into a “close” X

by W3TWEAKS
October 13, 2020

A chat bubble smoothly morphs into a "close" X in this elegant Pen from Mikael Ainalem. See the Pen Chat Bubble by...

Clipped Overlapping Grid Items

Clipped Overlapping Grid Items

by W3TWEAKS
September 30, 2020

Hristovv demonstrates how `clip-path` can help build magazine-style photo layouts with CSS. See the Pen Clipped overlapping grid items by...

Next Post
Creative Buttons using just CSS

Creative Buttons using just CSS

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools