Comment créer une animation avec un dégradé pour remplir tout le bouton

Question

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

Answer 1

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

Answer 2

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

Comment créer une animation avec un dégradé pour remplir tout le bouton

2 réponses

De nouvelles questions

Tags associés

css