Comment obtenir une transition de dégradé fluide lors du survol du bouton en CSS ?

Transition CSS avec dégradé linéaire

Problème :
Incorporer une transition vers un bouton avec un arrière-plan à dégradé linéaire à l'aide de CSS s'avère un défi .

Arrière-plan :

<br>a.button {<br>arrière-plan : -webkit-gradient (linéaire, haut gauche, bas gauche, color-stop(0%, @green), color-stop(100%, #a5c956));<br>-webkit-transition : arrière-plan linéaire 5 s;<br>}</p>
<p>a.button:hover {<br>-webkit-gradient(linéaire, haut gauche, bas gauche, color-stop(0%, @greenhover), color-stop(100%, #89af37))<br>}<br></pre&gt ;</p>
<p><strong>Résolution :</strong></p>
<p>Malheureusement, la prise en charge des transitions dégradées par le navigateur reste absente. Par conséquent, la solution de contournement suivante fournit une solution :</p>
<p><pre class="brush:php;toolbar:false"><br>a.button {<br> position : relative;<br> z-index : 9;<br> display : inline-block ;<br> remplissage : 0 10px;<br> arrière-plan : -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));<br> background : -webkit-linear- dégradé(haut, vert, #a5c956);<br> arrière-plan : -moz-linear-gradient(haut, vert, #a5c956);<br> arrière-plan : -o-linear-gradient(haut, vert, #a5c956); <br> arrière-plan : dégradé linéaire (haut, vert, #a5c956);<br>}</p>
<p>.button-helper {<br> position : absolue ;<br> z-index : -1 ;<br> haut : 0;<br> gauche : 0;<br> largeur : 100 %;<br> hauteur : 100 %;<br> opacité : 0;<br> arrière-plan : -webkit-gradient(linear, 0 0 , 0 100%, de(lime), à(#89af37));<br> arrière-plan : -webkit-linear-gradient(top, lime, #89af37);<br> arrière-plan : -moz-linear-gradient(top , citron vert, #89af37);<br> arrière-plan : -o-linear-gradient(top, citron vert, #89af37);<br> arrière-plan : linéaire-gradient(haut, citron vert, #89af37);<br> -webkit- transition : opacité 1s linéaire ;<br> -moz-transition : opacité 1s linéaire ;<br> -o-transition : opacité 1s linéaire ;<br> transition : opacité 1s linéaire ;<br>}</p>
<p>a .button:hover .button-helper {<br> opacité : 1;<br>}<br>

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

Cette méthode utilise un élément supplémentaire avec le dégradé souhaité et modifie son opacité, permettant l'apparition d'un changement de couleur fluide en survol.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!