CSS GRADIENT BUTTON

SELECT A GRADIENT TO CREATE A BUTTON OR EDIT BUTTON DIRECTLY

Edit button

Text
Text color
Text shadow size [+] px
Text shadow color yesno
Font Family
Bold textyesno
Font size px
Padding [+] px
Shadow size [+] px
Shadow Inset yes no
Shadow color
[-]
Reset
Background Start automodify
Background End automodify
Background Start HOVER automodify
Background End HOVER automodify
Border Radius size [+] px
Border [+] automodify
Border size [+] px
Border HOVER [+] automodify
Border size HOVER [+] px
Easier to edit : Background Example

Html & css code for gradient button

Copy to clipboard
 




It is a way to remember easily the options you changed when you created button. Save, share (copy and paste to Twitter...) with your friends...
INTEGRATION WITH SPAN TAG
You can use another tag : span to display button
Just add this code into the just after <body> for example




UPDATE July 20th 2012 :
Cssgradientbutton got more than 29 customizables options to create awesome Css buttons
A lot of options have been added :

- You can directly change background color or border color (without unchecking auto)
- You can change With or Font size just with slider (without unchecking auto)
- Shadow size choice [+] (you can modify horizontal or vertical shadow size...)
- Padding has been simplified [+]
- Text shadow size can be modify easily with slider
- You can change each borders radius(4) sizes (Top Left / Top Right / Bottom Right / Bottom Left)
- You can change each borders(4) sizes and colors
- You can change each borders(4) hover sizes and colors
- By default width auto is checked


UPDATE September 7th 2012 :
New options have been added :
- You can change text-shadow [+] : h-shadow (horizontal) / v-shadow (Vertical) / blur / opacity
- 3 Backgrounds samples : in order to help user to edit button on differents background...
- 10 new buttons added on the Css button examples page


UPDATE January 24th 2013 :
You can choose to show or not blocks elements [-] : helpful when you edit many options of form and need to focus on them.


UPDATE March 7th 2013 :
webkit-gradient : syntax has been updated (thanks for feedback)
linear-gradient : syntax has been updated


INFORMATION :
All options work with Internet Explorer except Border Radius(IE9+) & Text shadow(IE10+) & Box Shadow(IE9+)
Css button examples
Beta Version 0.16 - Contact & Feedback - Bookmark - Privacy