Maison >interface Web >tutoriel CSS >Comment obtenir une transition de dégradé fluide lors du survol du bouton en CSS ?

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

DDD
DDDoriginal
2024-11-02 04:10:03465parcourir

How to Achieve a Smooth Gradient Transition on Button Hover in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn