Home / Frontend Codes and Demos / Essentials / CSS Buttons / 55 Useful handpicked CSS Buttons with examples and demos

55 Useful handpicked CSS Buttons with examples and demos

In this article, we listed the hand-picked awesome css3 buttons collections developed using only css, html, JavaScript, etc. Listed tutorials well played with colors, gradients or shapes. Some of the buttons are have beautiful animation effects using transitions. Demo and download available on each tutorial. 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.

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

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.

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

Author:

Elior Tabeka

Created:

AUGUST 15, 2016

Made with:

HTML, CSS and JavaScript

4) Simple CSS 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

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.

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

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.

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

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.

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.

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.

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.

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

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

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!

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!

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

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.

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

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

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.

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’

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.

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.

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

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

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.

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

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.

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.

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.

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.

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.

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)

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.

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

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.

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.

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

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.

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

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.

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.

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.

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

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

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

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.

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.

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.

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.

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.

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.

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.

Author:

Phil Hoyt

Created:

FEBRUARY 03, 2014

Made with:

HTML, CSS

55) Colorful CSS Button

Demo Image:

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

Author:

Pali Madra

Created:

JUNE 24, 2014

Made with:

HTML, CSS

About CV

I'm frontend developer