How to Achieve a Smooth Gradient Transition on Button Hover in CSS?

CSS Transition with Linear Gradient

Issue:
Incorporating a transition to a button with a linear-gradient background using CSS proves challenging.

Background:

<br>a.button {<br>background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @green), color-stop(100%, #a5c956));<br>-webkit-transition: background 5s linear;<br>}</p>
<p>a.button:hover {<br>-webkit-gradient(linear, left top, left bottom, color-stop(0%, @greenhover), color-stop(100%, #89af37))<br>}<br>

Resolution:

Regrettably, browser support for gradient transitions remains absent. Therefore, the following workaround provides a solution:

<br>a.button {<br>  position: relative;<br>  z-index: 9;<br>  display: inline-block;<br>  padding: 0 10px;<br>  background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));<br>  background: -webkit-linear-gradient(top, green, #a5c956);<br>  background: -moz-linear-gradient(top, green, #a5c956);<br>  background: -o-linear-gradient(top, green, #a5c956);<br>  background: linear-gradient(top, green, #a5c956);<br>}</p>
<p>.button-helper {<br>  position: absolute;<br>  z-index: -1;<br>  top: 0;<br>  left: 0;<br>  width: 100%;<br>  height: 100%;<br>  opacity: 0;<br>  background: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37));<br>  background: -webkit-linear-gradient(top, lime, #89af37);<br>  background: -moz-linear-gradient(top, lime, #89af37);<br>  background: -o-linear-gradient(top, lime, #89af37);<br>  background: linear-gradient(top, lime, #89af37);<br>  -webkit-transition: opacity 1s linear;<br>  -moz-transition: opacity 1s linear;<br>  -o-transition: opacity 1s linear;<br>  transition: opacity 1s linear;<br>}</p>
<p>a.button:hover .button-helper {<br>  opacity: 1;<br>}<br>

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

This method employs an additional element with the desired gradient and transitions its opacity, allowing for the appearance of a smooth color change on hover.

The above is the detailed content of How to Achieve a Smooth Gradient Transition on Button Hover in CSS?. For more information, please follow other related articles on the PHP Chinese website!