Css Gradient Button

Html & css code for gradient button

Copy to clipboard

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+)

SELECT A GRADIENT TO CREATE A BUTTON OR EDIT BUTTON DIRECTLY

Html & css code for gradient button