I want CSS gradient to a button with background image supporting IE8 & 9.

[omi]

You can check this URL in IE and other browsers. http://jsfiddle.net/aEK4j/

[Stomme poes]

Well for IE7 and 8 you could use the filter. It should be the last thing listed.
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff9d295', EndColorStr='#fff1a32b');

the -ms prefix is deprecated for actual linear-gradient. For IE10 (and 9?) you should be able to use it straight and prefixless.

Now the trouble with IE9 is, it gets the gradient, but lets them leak out of the corners.

If you don't want to go into 500-lines-of-css-for-each-browser, the simplest solution is to wrap your element in another element, and put the rounded corners on *that* instead. In IE9, while an element can't hold its own insides in with rounded corners, a container can.

<span class="ie9wrap"><input...></span>
.ie9wrap gets display: block and rounded corners.
.ie9wrap input gets the gradients.

[logic_earth]

When it comes to gradients, one has to now change the format, With IE, use the "-ms-" prefix for the old format, goes for all browsers.

http://www.sitepoint.com/using-unpre...dern-browsers/