CSS 过渡适用于 IE，但不适用于 Firefox、Chrome 和 Opera [重复]

Question

早上好：

按钮中的 CSS 转换命令有几个问题。我正在尝试使用过渡效果更改背景颜色，但令人惊讶的是它只适用于 Internet Explorer，而在 Firefox、Chrome 或 Opera 中不起作用，我不知道为什么。

我的代码：

#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>

我不知道该怎么做，我查看了所有教程，但没有一个能解决我的问题。请问有什么解决办法吗？

谢谢。

Answer 1

#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>

由于我们还不能转换 CSS 渐变（到另一个渐变），我提供了一个使用伪元素的 lil' 解决方法。显示的过渡由 opacity 属性触发。

Answer 2

添加上面的答案：更改过渡效果中的渐变（使用背景位置）：

#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>