I want to split the background colors of a couple buttons I have, preferably in percentages since there will be 2 to 3 colors. The way I have it now works in chrome and ie10. I would like to support ie8 and 9 with this feature.

```
    <div class="col-sm-12 no-wrap">
        <input type="text" class="text-input">
        <button type="button" id="search-glyph"><span class="glyphicon glyphicon-search search-glyph"></span></button>
    </div>

```

This is an example of where I would like to use this (requires bootstrap). There is a button attached to a search bar. The button will have a top color (lighter red) and the bottom darker with a search icon. Here's the css I'm currently using.

```
.text-input {
float: left;
padding-left: 10px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
background-color: #f0f0f0;
width: 200px;
height: 34px;
border-top: 1px solid #231f20;
border-left: 1px solid #231f20;
border-bottom: 1px solid #231f20;
border-right: 0;
}

.text-input:focus {
outline-color: #ed1c24;
}

#search-glyph {
text-align: center;
height: 34px;
width: 34px;
color: #ffffff;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
border-top: 1px solid #231f20;
border-right: 1px solid #231f20;
border-bottom: 1px solid #231f20;
background: linear-gradient(#d91616 50%, #c20404 50%);
border-left: 0;
}

#search-glyph:focus {
outline: 0;
}

```

The problem is that ie 8 and 9 don't support linear gradient. Can anyone get this working in those browser versions?