In my last post I bashed CSS3 buttons a bit because of the extensive code required. Since that post I did some more digging and found alternatives that are much more acceptable.

So I decided to do another post showing three buttons designed using CSS3 styles that have a reasonable presentation in IE 7,8 and 9. Before we get started click the link below to open the demo html file in a new window; CSS3 Buttons

Lets get started with the first button.

CSS3 Button – round corners, borders and shadow

Here is the code:

As before I have made the top and left borders lighter than then normal state background and the bottom and right borders. Corners are rounded at 10 px.

The new CSS3 box-shadow property is used here. The first number is the horizontal position, the second number is the vertical position, the 3rd number is the blur distance, and the fourth is the color. I like using the rgba color format because you can set opacity, which is the last number. Reference : w3schools.com. There is a great site at Westciv.com CSS3 Shadows that you can use to play with the box-shadow property. In the hover state I’ve reduced the horizontal and vertical offsets and the blur distance and the opacity. All of this creates the illusion of clicking the button.

IE compatibility – IE 9 is compatible with this set-up, as there are no gradients. For IE 7 and 8, the button simply reduces to right angle corners with no shadows, with the background colors changing in the normal and hover states.

Opera compatibility – I did notice what appears to be a bug in Opera, When you hover over the button the bottom shadow remains unchanged. It’s not something I’m going to worry about because of the limited use of the browser (2.2%), and because Opera is likely working on the issue.

CSS3 Button – round corners, shadow, and gradient

Here’s the code:

I must say the gradient is pretty cool. And for IE 9, the fall back is a rounded corner button with a shadow, which I think is a great looking button in itself. Just like in the previous case Opera does not render the shadow properly in the hover state. Setting the background-color property for the normal and hover states is critical to making your IE buttons look decent.

There is still quite a bit of code, all for a button, but at least all that nasty svg stuff is not there. I’m not going to get into the gradient details, except to say the first hex color number is the top color and the second hex color number is the bottom color.

CSS3 Button – round corners and shadow

Here’s the code:

I like this button the best for a couple of reasons. I think it looks great and it has the least amount of code. The button works fine in IE 9, and shows as a box in IE 7 and 8. Opera has the same rendering issue in the hover state.

Summary

All of these CSS3 buttons look great, but compatibility remains an issue, however lesser when you include back-ground colors in the gradient case as an IE fallback. I prefer the last button because the coding is the simplest. I’m currently working on incorporating buttons into the blogBox WordPress theme by setting using Shortcodes. This will be subject of my next post.

Hope you enjoyed the post….Happy Coding!

The HTML and CSS files can be downloaded here :