J'ai un bouton avec un dégradé linéaire et je veux survoler ce bouton avec une animation de dégradé linéaire à une seule couleur. Dans ce cas, du jaune-rouge linéaire au rouge juste.

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 35%, yellow 100%);;
  color: transparent;
}
button:hover {
   animation: ex 4s ease-out;
}

@keyframes ex {
  from {
    background: linear-gradient(to left, red 35%, yellow 100%);
  }
  to {
    background: linear-gradient(to right, red 35%, red 100%);;
  }
}
<button class="button">xxxxxx</button>
css linear-gradients
3
mckvak 3 nov. 2019 à 21:06

2 réponses

Meilleure réponse

Voici une autre idée où vous pouvez animer background-color:

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 35%, transparent 100%);
  background-color:yellow;
  transition:2s background-color;
  color: transparent;
}
button:hover {
   background-color:red;
}
<button class="button">xxxxxx</button>

Un autre avec background-position

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to right, yellow, red 32.5%);
  background-size:200% 100%;
  transition:2s background-position;
  color: transparent;
}
button:hover {
   background-position:right;
}
<button class="button">xxxxxx</button>
1
Temani Afif 3 nov. 2019 à 19:44

Vous pouvez utiliser une ombre rouge incrustée pour la couvrir. De plus, il est préférable dans ce cas d'utiliser une transition. La transition fonctionne lorsque vous arrêtez de survoler l'élément, même au milieu de l'animation.

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 0, red 77%, yellow 100%);
  background-size: 200%;
  color: transparent;
  box-shadow: inset 0 0 0 200px transparent;
  transition: box-shadow 4s ease-out;
}

.button:hover {
  box-shadow: inset 0 0 0 200px red;
}
<button class="button">xxxxxx</button>

Et si vous voulez vraiment utiliser l'animation (vérifiez ce qui se passe lorsque vous arrêtez de survoler l'élément):

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 0, red 77%, yellow 100%);
  background-size: 200%;
  color: transparent;
  transition: box-shadow 4s ease-out;
}

button:hover {
   animation: ex 4s ease-out;
}

@keyframes ex {
  from {
    box-shadow: inset 0 0 0 200px transparent;
  }
  to {
    box-shadow: inset 0 0 0 200px red;
  }
}
<button class="button">xxxxxx</button>
0
Ori Drori 3 nov. 2019 à 18:14

Questions connexes

4 Bouton CSS transition arrière-plan dégradé linéaire en arrière-plan transparent

De nouvelles questions

6 Le code ne revient pas à son état d'origine après l'exécution lorsque nous supprimons la case à cocher?
3 Pourquoi justify-content: center échoue-t-il lorsque je rétrécis la largeur de la fenêtre?
4 Impossible d'attribuer plusieurs éléments HTML dans la fonction .css ()
4 Puis-je ajouter des attributs facultatifs à un élément dans React?
4 Essayer d'obtenir mon <ul> pour remplir le fond de mon conteneur en utilisant Flexbox
3 Javascript comment agrandir le texte de 10%
2 Comment ajouter une bordure aux derniers composants angulaires (list-group-item) générés avec * ngFor
3 Comment colorier l'une des 100 cases avec un bouton dans un modal en utilisant javascript
3 Ajout de texte sous chaque colonne 4X4 en utilisant CSS GRID
6 Centrer un texte à l'intérieur d'un élément rotatif
Toutes les questions sur css >

css

CSS (Cascading Style Sheets) est un langage de feuille de style de représentation utilisé pour décrire l'apparence et la mise en forme des documents HTML (HyperText Markup Language), XML (Extensible Markup Language) et des éléments SVG, y compris (mais sans s'y limiter) les couleurs, la mise en page, les polices, et animations. Il décrit également comment les éléments doivent être affichés à l'écran, sur papier, dans un discours ou sur d'autres supports.

css...