CSS Transition works in IE, but not in Firefox, Chrome nor Opera

Question

Good morning:

I have several problems with CSS transition command in a button. I am trying to do a background color change with a transition effect, and surprisely it only works in Internet Explorer, and it doesn't work in Firefox, Chrome or Opera, I don't know why.

My code:

#button_example{ 
    background: -webkit-linear-gradient(#0CA5E2, #FFFFFF); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
    background: -o-linear-gradient(#0CA5E2, #FFFFFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0CA5E2, #FFFFFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0CA5E2, #FFFFFF); /* Standard syntax */
    background: -ms-linear-gradient(top, #0CA5E2 0%, #FFFFFF 100%); /* IE10+ */
    border-radius: 5px; 
    -webkit-box-shadow:0px 1px 1px #DEDEDE; 
    -moz-box-shadow:0px 1px 1px #DEDEDE; 
    box-shadow:0px 1px 1px #DEDEDE; 
    /* margin-left: 5px; */
    margin-top: 10px;  
    width: 280px; 
    height: 40px;
    font-size: 1.5em; 

    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}



#button_example:hover {
    background: -webkit-linear-gradient(#FFFFFF, #0CA5E2); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
    background: -o-linear-gradient(#FFFFFF, #0CA5E2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFFFFF, #0CA5E2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FFFFFF, #0CA5E2); /* Standard syntax */
    background: -ms-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* IE10+ */
    border-radius: 5px; 
    -webkit-box-shadow:0px 1px 1px #DEDEDE; 
    -moz-box-shadow:0px 1px 1px #DEDEDE; 
    box-shadow:0px 1px 1px #DEDEDE; 
    /* margin-left: 5px; */
    margin-top: 10px;  
    width: 280px; 
    height: 40px;
    font-size: 1.5em; 
}

<button id="button_example" type="button" onclick="window.location.href='www.google.es'">Google</button>

I don't know how to do, I have view all tutorials, but none of them fix my problem. Any solution please?

Thanks.

I think your answer is here https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds — subir biswas, Jul 05 '18 at 07:59
`background-image` is not animatable. Have a look at the following post for possible solutions -> https://stackoverflow.com/questions/7363141/css-transition-with-linear-gradient — Morpheus, Jul 05 '18 at 07:59

score 2 · Answer 1 · answered Jul 05 '18 at 08:08

#button_example{ 
    background: -webkit-linear-gradient(#0CA5E2, #FFFFFF); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
    background: -o-linear-gradient(#0CA5E2, #FFFFFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0CA5E2, #FFFFFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0CA5E2, #FFFFFF); /* Standard syntax */
    background: -ms-linear-gradient(top, #0CA5E2 0%, #FFFFFF 100%); /* IE10+ */
    border-radius: 5px; 
    -webkit-box-shadow:0px 1px 1px #DEDEDE; 
    -moz-box-shadow:0px 1px 1px #DEDEDE; 
    box-shadow:0px 1px 1px #DEDEDE; 
    /* margin-left: 5px; */
    margin-top: 10px;  
    width: 280px; 
    height: 40px;
    font-size: 1.5em; 
    display: block;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    position: relative;
}
#button_example::after{
content: "";
position: absolute;
top: 0;
left:0;
right: 0;
bottom: 0;
background: -webkit-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
    background: -o-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* For Firefox 3.6 to 15 */
    background: linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* Standard syntax */
    background: -ms-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* IE10+ */
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index:1;
}

#button_example:hover::after{
  opacity: 1;
}
#button_example span{
position: relative;
z-index:2;
}

#button_example:hover {
    
    border-radius: 5px; 
    -webkit-box-shadow:0px 1px 1px #DEDEDE; 
    -moz-box-shadow:0px 1px 1px #DEDEDE; 
    box-shadow:0px 1px 1px #DEDEDE; 
    /* margin-left: 5px; */
    margin-top: 10px;  
    width: 280px; 
    height: 40px;
    font-size: 1.5em; 
    
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

<button id="button_example" type="button" onclick="window.location.href='www.google.es'"><span>Google<span></button>

Since we can't transition CSS gradients (to another gradient) yet, I've provided a lil' workaround using a pseudo element. The shown transition is triggered by the opacity property.

A-M-A-Z-I-N-G!!! 100000 THANK YOU!! That's what I needed. I owe you a beer! Thanks again!. — DeathGun, Jul 05 '18 at 08:27
If my answer resolve your issue, then please mark it as check, It will helps other to find the solution quickly. — subir biswas, Jul 05 '18 at 11:37

score 0 · Answer 2 · answered Jul 05 '18 at 08:46

To add on answer above: change the gradient in transition effect (using background position):

#button_example {
   background: -webkit-linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
   /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
   background: -o-linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
   /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
   /* For Firefox 3.6 to 15 */
   background: linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
   /* Standard syntax */
   background: -ms-linear-gradient(top, #0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
   /* IE10+ */
   border-radius: 5px;
   -webkit-box-shadow: 0px 1px 1px #DEDEDE;
   -moz-box-shadow: 0px 1px 1px #DEDEDE;
   box-shadow: 0px 1px 1px #DEDEDE;
   /* margin-left: 5px; */
   margin-top: 10px;
   width: 280px;
   height: 40px;
   font-size: 1.5em;
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   -ms-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
   background-size: 100% 200%;
   background-repeat: repeat-y;
  }
  
  #button_example:hover {
   background-position: 0 100%;
  }

 <button id="button_example" type="button" onclick="window.location.href='www.google.es'">Google</button>

CSS Transition works in IE, but not in Firefox, Chrome nor Opera

2 Answers2