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.
