Don't Worry, It's Free!
sign into loading.io now
SIGNUPLOGIN
or login with
Newcomer here? Sign up »Already a member? Sign In »
{{n.message}}

Here is your PNG



Download 
Close

Here is your CSS + sample HTML

Copy
 
Close

CSS Button Generator

Customize your own css buttons with loading indicator!


GET START
WITH THESE
PRESET NOW!


Get CSS
Get PNG
Save
{{ctrl.text1.content}}
{{ctrl.text2.content}}
Background
Border
Padding
 
Background and Gradient
 
Shadow
 

Button Body

 
Dimension
Border
 
Padding
Shadow
 
 
 
 

Loader Style / from loading.css


 

Text Style / for main text

 
Shadow
 
 

Text Style / for description

 
Margin
Shadow
 
 

Icon Style / from fontawesome

Border
 
Padding
Margin
Position
Shadow
 
 
Shadow
 
 
 
 

or Pick from Our Preset !

Want More? Share It!

sharing = "it is a great tool " = incentive to create more presets :p

Technical Details

TL;DR - Get PNG if you want to support older browsers like IE <= 10.

This generator is built with modern web technology, such as flexbox and css animation; the generated css for buttons also uses advanced css attributes like box-shadow and text-shadow, border-radius and css animation. Older browsers, such IE <= 9, will not be able to use this.

Here is a reference table for styles used and their browser compatibilty:

CSS Transition11+
Flexbox10+
Text Shadow10+
CSS Gradient10+
CSS Animation10+
CSS Transform10+
Box Shadow9+
Border Radius9+

Any external dependency?

TL;DR - No other dependency unless you enable loader option.

Loader in button is based on our another product loading button and loading.css, which are tiny pure CSS libraries handy for website development. If you enable loader, these dependencies will be automatically included in the generated CSS.

You can check following links for further detail: