La couleur du hover n'apparait pas

[schtroumph]

Salut

Pour les boutons j'ai fais un effet au hover. L'effet se fait bien, mais la couleur du fond du bouton qui doit apparaître au survol n’apparaît pas, à la place c'est blanc (voir sur jsfiddle.net).

[lomart]

Bonsoir,

Ma suggestion

https://jsfiddle.net/k5y4r7zx/1/

[schtroumph]

J'ai oublié de préciser que c'est la couleur de fond du bouton qui doit passer du noir au rouge (je rajoute cette info dans mon premier message). Après, c'est vrai que j'ai oublié de mettre la couleur du texte sur le hover.

[lomart]

C'est vrai que ton explication est loin d'être claire

[Jeff71]

Bonjour,
je propose celà pour une transition du fond noir à rouge

.bouton b {
color:white;
text-decoration: none;
background: linear-gradient(black 100%, red 100%);
background-size: 100% 100%, 100% 100%;
background-position: top, bottom;
background-repeat: no-repeat, no-repeat;
border:#000 1px solid;
border-radius:10px;
padding:10px;

background-color:red;

transition-duration:1s;
transition-property: background-size;
}

.bouton b:hover {
background-size: 100% 0, 100% 100%;

transition-duration:1s;
transition-property: background-size;
}

[schtroumph]

C'est vrai que ton explication est loin d'être claire

Ouais bon, il manquait juste cette petite info . Ok, je l'avoue, qui était importante .

Bonjour,
je propose celà pour une transition du fond noir à rouge
}

En ajoutant un background-color ca marche.

Merci pour ta solution. Merci aussi à toi lomart d'avoir pris le temps de me répondre .

Par contre je ne comprends pas pourquoi j'avais le fond blanc alors que dans mon linear-gradient il y avait les deux couleurs.