In this post I will show two buttons, one created using a background image. and another button created with CSS3 gradients. Before I get into the details I’d like to make a few comments about compatibility. I looked at the W3C browser stats for June 2012 :

  • Chrome 41.7%
  • Firefox 34.4%
  • Explorer 16.7%
  • Safari 4.1%
  • Opera 2.2%

And for Explorer the breakdown is as follows :

  • IE 10 (beta) – 0.1%
  • IE 9 – 6.1%
  • IE 8 – 8.0%
  • IE 7 – 1.9%
  • IE 6 – 0.6%

My first comment is forget about IE 6, as the stats are telling me it’s just not worth it. I also noted that Internet Explorer continues to decline, by almost 1% a month of the total market share. Hopefully it picks up pace, especially with IE 7 and 8, although they are not as bad as IE 6. Currently IE 6,7, and 8 browsers are used for about 10% of the internet.

It is always good to keep an eye on the stats, because it helps you make a better decision when dealing with browser compatibility issues.

No where are compatibility issues more evident then when you use CSS3 gradients.

I’ll present two buttons that look identical, but coding is quite different, and compatibility is an issue. Before we start click the link to open the demo in a new tab or window.

CSS3 Button – round corners and gradients

The first button is created with CSS3 rounded corners and gradients. It does have advantages over the image technique in that images do not have to be downloaded to the browser. Most of the browsers have not adopted the W3C proposed syntax for gradients, and use vendor prefixes to the syntax. What this means is that the different browsers have their own syntax for CSS3 gradients. In addition Internet Explorer 9 does not support gradients, and the developer must incorporate SVG background images. And then there’s IE 6,7 and 8. So needless to say there is a lot of coding you need to do to use CSS3 gradients, and add the compatibility.

A good reference to all this fun stuff is Sitepoints HTML5 & CSS3 For The Real World. The best way to handle it is to use a CSS3 Gradient Generator. ColorZilla has a generator available with the plugin for Firefox, or directly at ClorZilla CSS3 Gradient Generator.

It takes a bit of fiddling around but I was able to generate the normal and hover state gradients. Once the gradient is set up it’s a simple matter of copying the CSS code into your own CSS file. I left the opacity at 100% for each end point. For the normal state I used hex color #ffffff (white) to #888888 (gray) and for the hover state I used hex color #dbdbdb (lighter gray) to #888888 (gray). The CSS code for the button is :

Note that the code has been modified to fit into the box, in particular the SVG data string is one continuous string with no spaces. Also, when using the ColorZilla Gradient generator tool pay attention to the question mark next to IE 9 Support as it details further HTML code to be added into your header if you want to use multi-point gradients.

So that’s a lot of code for a button!

I would hazard a guess that W3C and the browser developers need to do just a little more work to make CSS3 gradients easier to program. Also, when I tested IE 7 and 8 using IE 9’s developer tools the button appeared as a white box for a button, and it does not change in the hover state. It might be an issue with the developer, or possibly the filter code generated by the CSS3 Gradient Generator. Who knows? In any event, it’s a mountain of complexity and code that most inexperienced developers like me must find daunting.

CSS Button – background image

Old practices to the rescue! In the previous post I provided a video on making a gradient styled button in GIMP. The video shows you can make such a button in 5 minutes with GIMP. Okay it’s not the fanciest button around but it’s pretty nice, and should do the trick for most websites. Once the button is made use the following CSS and HTML code for the button and your good to go :

Just a few less lines of code, simpler to understand, and compatible in all browsers, even IE 7,8, and 9 ! I have to say that to me, it’s much simpler to use the CSS image method. There are obviously other uses for the CSS3 gradient feature, and the idea is certainly, a good one, but the gradient syntax will have to be reduced to one line of code for all browsers, (IE 7 and 8 the exceptions of course), before it will become widely used.

I hope you enjoyed the post….more to come as I continue to learn about website development. The HTML and CSS file used in the example is available for download :