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>
2 réponses
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>
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>
Questions connexes
De nouvelles questions
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.