Contraire de :hover pour boutton en CSS
Résolu
blaz32
Messages postés
179
Statut
Membre
-
salim_1305 Messages postés 70 Statut Membre -
salim_1305 Messages postés 70 Statut Membre -
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 ;-)
A voir également:
- Ce nom d'utilisateur est peut-être incorrect. assurez-vous de l'avoir tapé correctement. dans le cas contraire, contactez votre administrateur.
- Votre appareil ne dispose pas des correctifs de qualité et de sécurité importants - Guide
- Mot de passe administrateur oublié - Guide
- Idée nom d'utilisateur snapchat - Guide
- Clémence souhaite faire calculer automatiquement les prix de 30 produits dans trois devises. elle a déjà saisi une formule de calcul pour le tarif du premier produit dans la première devise. corrigez sa formule afin que recopiée vers le bas puis vers la droite, elle remplisse correctement tout le tableau. - Forum Excel
- Mot de passe administrateur freebox - Forum Freebox
5 réponses
Bonjour,
ça devrait t'aider :
https://www.creativejuiz.fr/blog/tutoriels/transitions-css3-mouseover-mouseout
ç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.
<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 ;-)
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 ;-)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
