Reputation: 12621

HTML button design with gradient in all browsers?

I have below HTML button style. it works fine in Fire fox but in IE it does not render properly. I am using IE7. but it should work in all IE versions above 7.

In FF:

enter image description here

But in IE its look is different:

enter image description here

Below is my CSS style:

button.skip {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #8C9CBF;
    background-image: -moz-linear-gradient(center top , #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%);
    border-color: #172D6E #172D6E #0E1D45;
    border-image: none;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 0 #B1B9CB inset;
    color: #FFFFFF;
    font: bold 16px/1 "helvetica neue",helvetica,arial,sans-serif;
    padding: 7px 0 8px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 1px #000F4D;
    width: 150px;

}

How can i display the button in IE similar to FF ? Thanks!

Upvotes: 1

Answers (6)

Gildas.Tambo

Reputation: 22643

check this CSS3 Gradient Generator

http://gradients.glrzad.com/

and this

https://www.google.de/url?sa=t&rct=j&q=&esrc=s&source=web&cd=5&cad=rja&ved=0CEsQFjAE&url=http%3A%2F%2Fwww.cssmatic.com%2Fgradient-generator&ei=90T2Ubz9FMSBtAa9v4CQDQ&usg=AFQjCNGsHA3AwD64r0PasZYe6JilW76msA&sig2=J-8dt2Oe-wTCailSEGucZA

http://www.colorzilla.com/gradient-editor/

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/

http://css3gen.com/gradient-generator/

Upvotes: 0

AnaMaria

Reputation: 3621

This is the CSS that you have to add for your button to work in IE

  background: -ms-linear-gradient(top, #dcdedb 0%, #c9cbc8 100%);
        /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdedb', endColorstr='#c9cbc8', GradientType=0);
        /* IE6-9 */

WORKING DEMO

EDIT: NEW DEMO

In case of IE9 and below you will not be able to use CSS3 gradients because IE9,IE8,IE7 does not support CSS3 gradients. An alternative is to create PNG buttons and assign the background image of the button to the PNG.

An alternative would be to use SVG. However i would not recommend that because using SVG just for the sake of creating one fancy button for IE7 does not make sense.

Upvotes: 1

Mohammad Mahdi Naderi

Reputation: 3165

You can use

Colorzilla Gradient Generator: http://colorzilla.com/gradient-editor/

and CSS3Pie: http://css3pie.com

Try this:

background: #8c9cbf; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOWNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU0NmE5ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzM2NTE4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDU2OTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #8c9cbf 0%, #546a9e 50%, #36518f 51%, #3d5691 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c9cbf), color-stop(50%,#546a9e), color-stop(51%,#36518f), color-stop(100%,#3d5691)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #8c9cbf 0%,#546a9e 50%,#36518f 51%,#3d5691 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #8c9cbf 0%,#546a9e 50%,#36518f 51%,#3d5691 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #8c9cbf 0%,#546a9e 50%,#36518f 51%,#3d5691 100%); /* IE10+ */
background: linear-gradient(to bottom,  #8c9cbf 0%,#546a9e 50%,#36518f 51%,#3d5691 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c9cbf', endColorstr='#3d5691',GradientType=0 ); /* IE6-8 */

and for Support in IE9:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Upvotes: 0

Hushme

Reputation: 3144

ie7 does not support css3 gradient property you should use pie.htc for ie8,ie7

here is the link for its page

http://css3pie.com/

Upvotes: 1

Michael Unterthurner

Reputation: 941

Try this:

-webkit-border-radius: 5px;
border-radius: 5px;

background: #8c9cbf; /* Old browsers */
background: -moz-linear-gradient(top,  #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c9cbf), color-stop(50%,#546a9e), color-stop(50%,#36518f), color-stop(100%,#3d5691)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #8c9cbf 0%,#546a9e 50%,#36518f 50%,#3d5691 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #8c9cbf 0%,#546a9e 50%,#36518f 50%,#3d5691 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #8c9cbf 0%,#546a9e 50%,#36518f 50%,#3d5691 100%); /* IE10+ */
background: linear-gradient(to bottom,  #8c9cbf 0%,#546a9e 50%,#36518f 50%,#3d5691 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c9cbf', endColorstr='#3d5691',GradientType=0 ); /* IE6-9 */

Upvotes: 1

mohkhan

Reputation: 12315

You can try IE specific CSS

background: -ms-linear-gradient(top, #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%); // IE 10
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#546A9E', endColorstr='#3D5691',GradientType=0 ); // IE 6-9

Tinker around with the values as per your needs.

Upvotes: 0

HTML button design with gradient in all browsers?

Answers (6)

Related Questions