CSS - Gradients In IE

Question

I am having trouble displaying buttons with gradients in IE. My CSS seems to be fine in FireFox and Chrome, but IE seems to be giving issues.

CSS:

.btn {
cursor: pointer;
border: none;
display: inline-block;
margin: 0;
line-height: 1;    
width: 100%;
padding: 0.5em 0;
text-align: center;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 0 4px rgba(51, 51, 51, 0.125);
-moz-box-shadow: 0 0 4px rgba(51, 51, 51, 0.125);
box-shadow: 0 0 4px rgba(51, 51, 51, 0.125);
width: 300px;
}


.btn--primary {
border: 1px solid #3A6896;
color: white;
font-size: 1.2em;
}


.btn--primary {
background: #09427c;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2597FE), color-stop(100%, #015CAE));
background-image: -webkit-linear-gradient(#2597FE, #015CAE);
background-image: -moz-linear-gradient(#2597FE, #015CAE);
background-image: -o-linear-gradient(#2597FE, #015CAE);
background-image: linear-gradient(#2597FE, #015CAE);
}


.btn--primary:hover, .btn--primary:focus, .btn--primary[disabled] {
background: #09427c;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0b5299), color-stop(100%, #07335f));
background-image: -webkit-linear-gradient(#0b5299, #07335f);
background-image: -moz-linear-gradient(#0b5299, #07335f);
background-image: -o-linear-gradient(#0b5299, #07335f);
background-image: linear-gradient(#0b5299, #07335f);
}

Here's my fiddle: http://jsfiddle.net/oampz/Wm67h/

Any help would be appreciated.

Thanks

UPDATE:

Created a new fiddle: http://jsfiddle.net/oampz/Wm67h/6/ using one of the generators mentioned, is fine in FF, looks even worse in IE!

UPDATE

This fiddle: http://jsfiddle.net/Wm67h/7/ is better in IE however does not have rounded borders/edges and the hover property doesnt work.

Answer 1

Think your gradient code is wrong, try this:

background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #2599FE),
    color-stop(0.8, #015DAE)
);
background-image: -o-linear-gradient(bottom, #2599FE 0%, #015DAE 80%);
background-image: -moz-linear-gradient(bottom, #2599FE 0%, #015DAE 80%);
background-image: -webkit-linear-gradient(bottom, #2599FE 0%, #015DAE 80%);
background-image: -ms-linear-gradient(bottom, #2599FE 0%, #015DAE 80%);
background-image: linear-gradient(to bottom, #2599FE 0%, #015DAE 80%);

Fiddle

if you need help with gradients, I have always found this generator to be very useful

Answer 2

Use filter to make it work for IE.

For Instance,

.yourClass{
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='xx', endColorstr='xx',GradientType=0 );
}

Replace 'xx' with your gradient values.

Hope this helps.