Contraire de :hover pour boutton en CSS
Résolu
Bonjour, j'ai fais un petit bouton "téléchager" et voici mon code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.btn{
background:black;
font-family:Arial;
color:white;
text-decoration:none;
padding-left:20px;
padding-right:20px;
padding-top:5px;
padding-bottom:5px;
margin-top:10%;
margin-left:40%;
}
.btn:hover{
background-color:#1E1E1E;
color:grey;
transition: background-color 0.4s ease 0s;
-webkit-transition: color 0.4s ease 0s;
}
</style>
</head>
<body>
<a href="mon_fichier.zip" class="btn">Télécharger</a>
</body>
</html>
Ce qui fait un effet de couleur en progressif quand la souris passe dessus, mais je voudrais savoir si il était possible de faire la même chose dans le sens inverse: quand la souris quitte le bouton, avec un effet de couleurs progressif.
J'espère que je suis assez clair ^^ mais si vous ne comprenez pas trop ce que je dit, je peux me ré-expliquer ^^'
Merci par avance de votre aide ;-)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.btn{
background:black;
font-family:Arial;
color:white;
text-decoration:none;
padding-left:20px;
padding-right:20px;
padding-top:5px;
padding-bottom:5px;
margin-top:10%;
margin-left:40%;
}
.btn:hover{
background-color:#1E1E1E;
color:grey;
transition: background-color 0.4s ease 0s;
-webkit-transition: color 0.4s ease 0s;
}
</style>
</head>
<body>
<a href="mon_fichier.zip" class="btn">Télécharger</a>
</body>
</html>
Ce qui fait un effet de couleur en progressif quand la souris passe dessus, mais je voudrais savoir si il était possible de faire la même chose dans le sens inverse: quand la souris quitte le bouton, avec un effet de couleurs progressif.
J'espère que je suis assez clair ^^ mais si vous ne comprenez pas trop ce que je dit, je peux me ré-expliquer ^^'
Merci par avance de votre aide ;-)
5 réponses
-
Bonjour,
ça devrait t'aider :
https://www.creativejuiz.fr/blog/tutoriels/transitions-css3-mouseover-mouseout
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 90px; height: 90px;
background: #fff;
border: 20px solid #aaa;
border-radius: 30px;
/* transition pour les deux événements */
transition: all 1s;
text-align: center;
}
div:hover {
border-color: #333;
transform: rotate(360deg);
border-radius: 50%;
}
</style>
</head>
<body>
<div><a href="mon_fichier.zip" class="btn">Télécharger</a></div>
</body>
</html>
tu vas aimer :)
EDIT : plus propre
Un homme à tout faire. -
Merci ça marche ^^
C'était dans la propriété de ma class sans "hover", j'avais oublié de mettre la même chose mais avec "ease-out" ^^
Mon code est celui-ci et il marche bien maintenant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.btn{
background:black;
font-family:Arial;
color:white;
text-decoration:none;
padding-left:20px;
padding-right:20px;
padding-top:5px;
padding-bottom:5px;
margin-top:10%;
margin-left:40%;
transition: background-color 0.5s ease-out 0s;
-webkit-transition: color 0.5s ease-out 0s;
}
.btn:hover{
background-color:#1E1E1E;
color:grey;
transition: background-color 0.4s ease-in 0s;
-webkit-transition: color 0.4s ease-in 0s;
}
</style>
</head>
<body>
<a href="mon_fichier.zip" class="btn">Télécharger</a>
</body>
</html>
Je me suis cassé la tête à comprendre avec le lien que vous m'aviez donné alors qu'il fallait faire pareil dans l'autre sens ^^'
Merci tout de même ;-) -
Merci :-)
-
je pense que ça marche
