Filters and background images together - css

Question

I'm trying to create a gradient effect for a button that degrades "Gracefully" on IE8 & IE9. I've a glossy gradient button, What I've done is that to get the same glossy look and feel in IE9 I'm using an SVG background image. For IE8 I've decided to loose the gloss and just stick to the basic two stops gradient the problem is that as soon as I ad the filter it take preference over background in IE9 as well which I don't want to happen. Is there a workaround for this issue? Following is the CSS
input[type="button"], input[type="submit"], input[type="reset"], button {
padding: 3px 10px 3px 10px;
margin: 0;
border: none;
color: white;
outline: 0;
font-size: 0.875em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
overflow: visible;
width: auto;
background: #094fa4;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ee5', endColorstr='#094fa4',GradientType=0 );
background-image: url(../images/btn.svg);
background: -moz-linear-gradient(top, #2261ad 0%, #2261ad 50%, #094fa4 50%, #094fa4 100%);
background: -webkit-linear-gradient(top, #2261ad 0%, #2261ad 50%, #094fa4 50%, #094fa4 100%);
background: -ms-linear-gradient(top, #2261ad 0%, #2261ad 50%, #094fa4 50%, #094fa4 100%);
/*background:linear-gradient(to bottom, #2261ad 0%, #2261ad 50%, #094fa4 50%, #094fa4 100%);*/
border-top: 1px solid #4379B9;
border-bottom: 1px solid #08438C;
border-radius: 4px;
cursor: pointer;
}

Answer 1

You can use CSS hack for IE8. Write like this:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ee5', endColorstr='#094fa4',GradientType=0 )\9; //for IE8 & below.
background-image: url(../images/btn.svg);
Read this for more http://www.gravitationalfx.com/css-hacks-for-ie-targeting-only-ie8-ie7-and-ie6/
OR
You can use conditional comment for different browsers http://www.quirksmode.org/css/condcom.html