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.
Comment your favorite button or comment the button which you admired from external resource.
1) Pure CSS loading animation for buttons

A simple test with pure CSS loading animation for buttons (uses jQuery to toggle class).
2) Shifting Material Button Modal

Two call-to-action buttons that give context to your modals in a Material Design fashion.
3) Button with Built-in Loading Indicator -JS and SCSS

Button with Built-in Loading Indicator
Elior Tabeka
AUGUST 15, 2016
HTML, CSS and JavaScript
4) Simple CSS buttons 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.
5) Submit button loader after submit

Submit button with loader after submit. No CSS Keyframes, all one JS timeline + SVG.
6) Button animation practice

Button animation practice
7) 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.
8) Gradient Button with translate

Gradient button with translate on hover
9) 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.
10) Button Hover States

Snazzy CSS hover states for a button.
11) Button Hover Effects

Some button hover effects using psuedo elements and borders.
Kyle Brumm
NOVEMBER 23, 2014
HTML, CSS and JavaScript
12) Pulsing Button

Pulsing button using css3 keyframe animation.
13) Twitter Button Concept using only CSS

Nice twitter button with door open like concept
14) Some simple buttons

Just some simple buttons
Ottis Kelleghan
JUNE 15, 2013
HTML, CSS and JavaScript
15) 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!
16) Purely CSS Button

Amazing and powerful the CSS Check-Box Hack is. No JS in this button!
17) Radio button highlight Underground

The radio button highlight travels underground
18) 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.
Mike @ Titan Global Tech
AUGUST 06, 2018
HTML, CSS and JavaScript
19) Animated CSS Button

First take on newest CodePen challenge. Animated button in Sass
20) Custom Checkbox and radio button Checklists

Custom Checklists Step-by-Step Guide. Have demo for both radio and checkbox custom tutorial and demo
Brandon McConnell
APRIL 25, 2018
HTML, CSS and JavaScript
21) Progress Button Microinteractions

Made an example button for uploading with microinteraction.
Takane Ichinose
JANUARY 08, 2019
HTML, CSS and JavaScript
22) Slidey radios (swappy radios remix)

A less-weird-but-still-weird remix of ‘Swappy radios’
23) Transitional Buttons using only CSS

Using of transitions in button hover effects.
24) Angularjs Material floating button directive

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

CSS3 Rounded Buttons developed using css and html
Burak Kaya
DECEMBER 10, 2012
HTML, CSS and JavaScript
26) CSS3 3d flip button

CSS3 button w/ 3d transform using no JS, no imgs, and No icon-fonts
27) 3D Parallax Buttons

3D pushable buttons with a real perspective and a parallax-like effect when scrolling. Made with CSS 3D transforms.
Alexander Futekov
MAY 08, 2013
HTML, CSS and JavaScript
28) Topcoat Button Bar

Default style for Topcoat Button Bar. Requirements are portable and accessible markup with flexible and performant css. No javascript required
29) 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.
30) Colorful CSS Buttons

A collection of various types of CSS buttons in various colors.
31) Button bubble effect

A hover effect using the gooey tricks.
32) CSS only Custom Radio Buttons

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

A basic CSS animation that makes a paper airplane fly out of this “Send” button when clicked.
Adrian Del Balso
JUNE 18, 2014
HTML, CSS and JavaScript
34) 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)
35) 3D flip button

Prototype for 3D flip button.
36) Sign-post arrow buttons

Sass mixin for creating arrow buttons. Uses transform: skew on pseudo-elements. CSS arrow buttons
37) Button hover effects with box-shadow

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

Elastic button, has pounding hearth for loading animation, will burst into ready state once done.
Rik Schennink
MARCH 12, 2014
HTML, CSS and JavaScript
39) CSS3 Button Hover Effects with FontAwesome

Pure CSS3 Button Hover Effects
40) Activate Button animation

Cool Activate and Waiting Button animation using HTML, CSS and JavaScript.
Aaron Iker
DECEMBER 17, 2018
HTML, CSS and JavaScript
41) Creative Buttons using just CSS

Creative Buttons using just CSS. Can be converted to SCSS for flexibility
42) CSS button with different transition effects

CSS Button with different on hover transition effects developed using css and html.
43) 20 Button Hover Effects

CSS Button with 20 diffrent hover animation effects developed using css and html.
44) CSS Button with Angled Sides

CSS Button with Angled Sides developed using only css and html.
45) CSS Buttons with animations

CSS Buttons with different animations reactions
46) Six Pure CSS Button Hover Animations

Six Pure CSS Button Hover Animations
47) Very creative CSS Buttons | Depth Effect

Very creative CSS Buttons | Depth Effect. Developed using css, html and javascript
Praveen Bisht
NOVEMBER 28, 2017
HTML, CSS and JavaScript
48) Next & Prev CSS buttons

Next & Prev CSS buttons.CSS buttons for next and previous button for sliders, or whatever.
49) 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.
Andréas Lundgren
JUNE 01, 2016
HTML, CSS and JavaScript
50) 7 different style CSS button transitions

CSS Button Animations styles.Playing around with some CSS button transitions. Possible repo for future use. Learning experience for me dealing with browser compatibility.
51) 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.
52) Enlarge button effect on hover

Button zoom effect on hover. CSS Button enlarge effect using only css and html. Demo and download available.
53) 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.
54) Generic CSS Button Kit

Generic CSS Button Kit developed using only css and html. Demo and download available.
55) Colorful CSS Buttons

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