57 Free CSS Buttons

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

 

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

 

Button with Built-in Loading Indicator

 

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.

 

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

 

Button animation practice

 

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.

 

Gradient button with translate on hover

 

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.

 

Snazzy CSS hover states for a button.

 

Some button hover effects using psuedo elements and borders.

 

Pulsing button using css3 keyframe animation.

 

Nice twitter button with door open like concept

 

Just some simple buttons

 

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!

 

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

 

The radio button highlight travels underground

 

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.

 

First take on newest CodePen challenge. Animated button in Sass

 

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

 

Made an example button for uploading with microinteraction.

 

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

 

Using of transitions in button hover effects.

 

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

 

CSS3 Rounded Buttons developed using css and html

 

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

 

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

 

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

 

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

 

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

 

A hover effect using the gooey tricks.

 

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

 

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

 

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)

 

Prototype for 3D flip button.

 

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

 

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

 

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

 

Pure CSS3 Button Hover Effects

 

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

 

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

 

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

 

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

 

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

 

CSS Buttons with different animations reactions

 

Six Pure CSS Button Hover Animations

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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