Recently I talked about CSS cross-browser gradients and last week I wrote again about CSS3 gradients. So what I’m going to do today? I will show you how to put the CSS gradient feature in practical use.
In this article you will see how you can create a set of gradient buttons just with CSS (no images).
Oh no! Not another CSS3 buttons!
That’s what you may say but, oh yes :) … This is another buttons set, powered by almighty CSS3 (and IE gradient filters).
- Scalability - Scale the buttons using font-size.
- Adjustability - Change padding and font-size and there you go.
- Flexibility - Apply the styles to any HTML elements.
- Fallback styles - Graceful degradation for other browsers.
- Usability - Normal, hover and active states are available.
“How it’s made”
- RGBA color mode
- Box shadow
- Text shadow
- Rounded corners
- Gradient patterns thanks to @leaverou for its enlightening article about CSS3 gradients techniques
Let’s see how the HTML looks for the blue button for example:
Multiple classes are used in order to have minimal HTML and CSS files.
The top border could have been achieved with an
inset box-shadow but, this way the CSS3 buttons will degrade graceful, as you will see later in this article.
And so on for the other buttons…
On browser support
Full support, including CSS3 gradient patterns (though I noticed some performance issues when page is rendered).
Webkit (Safari, Chrome)
The buttons are rendered very nice on Webkit browsers.
Unfortunately, Opera lacks any support for CSS gradients, still the buttons render very nice as other CSS3 features are not missing here.
IE6, IE7, IE8
filters, CSS gradients are possible also when talking about IE6 or IE7.
Besides the other IE browsers, IE9 supports rounded corners and box shadows, although the corners don’t look perfect as you can see below.
It would be recommended to use conditional comments when using filters. This way your CSS file will be cleaner and you will avoid performance issues.
Having said that, I hope you enjoyed this article and if you did don’t forget to follow me on Twitter or to leave a comment below!
CSS3 Webkit gradient support updated
11 useful online tools for web developers and designers