CSS GRADIENT BUTTON
SELECT A GRADIENT TO CREATE A BUTTON OR EDIT BUTTON DIRECTLY
Html & css code for gradient button
Copy to clipboard
INTEGRATION WITH ANOTHER HTML TAG 
You can use another html tag : a with the css code to display the button
Just add this code into the Html & css code for gradient button just after <body> for example
You can use another html tag : a with the css code to display the button
Just add this code into the Html & css code for gradient button just after <body> for example
INTEGRATION WITH JAVASCRIPT
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+) See more info
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+) See more info
With Internet Explorer 9 : Border Radius and Gradient at the same time doesn't work correctly.(thanks for feedback)
One solution is to use border radius without css gradient (only with background-color) (remove all background-image:... and filter:progid:... css properties)
Another solution is to use css gradient without border radius (remove all border-radius css properties)
You can use conditional comments to apply css for IE9 and let other browsers use another css.
First style (for all browsers) with css code for gradient button and border radius
Second style (only for internet explorer 9) with the css content you need to apply
If you need more information about conditional comment
One solution is to use border radius without css gradient (only with background-color) (remove all background-image:... and filter:progid:... css properties)
Another solution is to use css gradient without border radius (remove all border-radius css properties)
You can use conditional comments to apply css for IE9 and let other browsers use another css.
First style (for all browsers) with css code for gradient button and border radius
Second style (only for internet explorer 9) with the css content you need to apply
If you need more information about conditional comment
Bookmark