28172 sujets

CSS et mise en forme, CSS3

[Résolu] Changer la couleur au hover de la gauche vers la droite

Salut

Pour le hover d'un bouton je voudrais un changement de couleur qui va de la gauche vers la droite. Le changement se fait bien, mais du centre vers les coins haut gauche et bas droit : voir sur jsfiddle.net (j'ai modifié mon code suite à mon second message).

Le html :

<p class="bouton">
<a>Texte du bouton</a>
</p>


Le CSS :

.bouton a {
	padding:5px 16px;
	border:#000 1px solid;
	background:
		linear-gradient(90deg, rgba(255,255,0,1) 21%, rgba(255,255,0,1) 53%, rgba(255,255,0,1) 100%),
		linear-gradient(90deg, rgba(255,0,0,1) 21%, rgba(255,0,0,1) 53%, rgba(255,0,0,1) 100%)
;
	background-size: 100% 100%, 0 0;
	background-repeat: no-repeat, no-repeat;
	background-color:#ff0;
	transition-duration:1s;
	transition-property: background-size;
}

.bouton a:hover {
	background-size: 0 0, 100% 100%;
	transition-duration:1s;
	transition-property: background-size;
}


J'ai essayé en ajoutant un background-position: top left; mais ça ne change rien.
Modifié par schtroumph (15 Jun 2022 - 11:01)
En fait je me suis trompé dans l’écriture de mon background-position. Dans le hover j'aurais dû écrire : background-position: right, left;

Ça fait ce que je recherche, mais ça démarre au centre de la hauteur. J'aimerais que ça soit sur toute la hauteur. Vous voyez se que je veux dire ?

Edit : pour que ça démarre sur toute la hauteur il faut que je modifie mon background-size. Au lieu de le faire démarrer avec une hauteur à 0% je la met à 100%.
Modifié par schtroumph (15 Jun 2022 - 11:17)
Meilleure solution
Sujet clos
Aller à