Home > Article > Web Front-end > How Can I Transition CSS Linear Gradients on a Button?
CSS Transitions with Linear Gradients
A user is facing difficulties in applying transitions to a button's background, which is created using a CSS linear gradient. Their code is as follows:
<code class="css">a.button { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956)); -webkit-transition: background 5s linear; } a.button:hover { -webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37)) }</code>
Problem: The transition is not working on the button's background gradient.
Solution:
Regrettably, CSS transitions cannot be applied directly to linear gradients. Therefore, a workaround is necessary:
<code class="css">a.button { position: relative; z-index: 9; ... (rest of the CSS) background: linear-gradient(top, green, #a5c956); } .button-helper { position: absolute; z-index: -1; ... (rest of the CSS) background: linear-gradient(top, lime, #89af37); opacity: 0; -webkit-transition: opacity 1s linear; transition: opacity 1s linear; } a.button:hover .button-helper { opacity: 1; }</code>
<code class="html"><a href="#" class="button"> <span class="button-helper"></span> button </a></code>
The above is the detailed content of How Can I Transition CSS Linear Gradients on a Button?. For more information, please follow other related articles on the PHP Chinese website!