Comment puis-je effectuer une transition de dégradés linéaires CSS sur un bouton ?

Transitions CSS avec dégradés linéaires

Un utilisateur rencontre des difficultés pour appliquer des transitions à l'arrière-plan d'un bouton, créé à l'aide d'un dégradé linéaire CSS . Leur code est le suivant :

<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>

Problème :La transition ne fonctionne pas sur le dégradé de fond du bouton.

Solution :

Malheureusement, les transitions CSS ne peuvent pas être appliquées directement aux dégradés linéaires. Par conséquent, une solution de contournement est nécessaire :

1. Créez un élément supplémentaire avec le dégradé souhaité.
2. Positionnez l'élément derrière le bouton (en utilisant un z-index négatif) et couvrez la même zone.
3. Définissez l'opacité initiale de l'élément de dégradé sur 0.
4. Utilisez la transition CSS sur la propriété opacity pour faire apparaître progressivement l'élément de dégradé au survol.

<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>

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!