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
- Le fichier pdf à télécharger est disponible avec le même nom sur le site de bell canada. mais vous ne le trouverez pas directement avec un moteur de recherche… quelle est l’url de ce fichier pdf sur le site web de bell canada ? - Forum Réseaux sociaux
- Idée nom d'utilisateur snapchat - Guide
- 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
