如何在CSS中实现按钮悬停的平滑渐变过渡？

具有线性渐变的 CSS 过渡

问题：
使用 CSS 将过渡合并到具有线性渐变背景的按钮具有挑战性.

背景：

<br>a.button {<br>背景：-webkit-gradient(线性，左上，左下， color-stop(0%, @green), color-stop(100%, #a5c956));<br>-webkit-transition: 背景 5s 线性;<br>}<p>a.button:hover {<br>-webkit-gradient(线性、左上、左下、color-stop(0%, @greenhover)、color-stop(100%, #89af37))<br>}<br></pre&gt ;</p><p><strong>解决方案：</strong></p><p>遗憾的是，浏览器仍然不支持渐变过渡。因此，以下解决方法提供了解决方案：</p><p><pre class="brush:php;toolbar:false"><br>a.button {<br>position:relative;<br>z-index:9;<br>display:inline-block ;<br> 填充：0 10px;<br> 背景：-webkit-gradient(线性, 0 0, 0 100%, from(green), to(#a5c956));<br> 背景：-webkit-线性-渐变（顶部，绿色，#a5c956）;<br>背景：-moz-线性渐变（顶部，绿色，#a5c956）;<br>背景：-o-线性渐变（顶部，绿色，#a5c956）; <br> 背景：线性渐变（顶部，绿色，#a5c956）;<br>}</p><p>.button-helper {<br> 位置：绝对;<br> z 索引：-1;<br> 顶部：0；<br> 左：0；<br> 宽度：100%；<br> 高度：100%；<br> 不透明度：0；<br> 背景：-webkit-gradient(线性，0 0 , 0 100%, from(lime), to(#89af37));<br> 背景: -webkit-linear-gradient(top, Lime, #89af37);<br> 背景: -moz-线性-gradient(top ，石灰，#89af37);<br>背景：-o-线性渐变(顶部，石灰，#89af37);<br>背景：线性渐变(顶部，石灰，#89af37);<br>-webkit-过渡：不透明度 1 秒线性；<br> -moz-transition：不透明度 1 秒线性；<br> -o-transition：不透明度 1 秒线性；<br> 过渡：不透明度 1 秒线性；<br>}</p><p>a .button:hover .button-helper {<br> 不透明度: 1;<br>}<br>

<br><a href="#" 类="button"><span class="button-helper"></span>button</a><br>

此方法使用一个附加元素所需的渐变并过渡其不透明度，从而在悬停时呈现平滑的颜色变化。

以上是如何在CSS中实现按钮悬停的平滑渐变过渡？的详细内容。更多信息请关注PHP中文网其他相关文章！