Home >Web Front-end >CSS Tutorial >How to Achieve a Smooth Gradient Transition on Button Hover in CSS?
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!