Contraire de :hover pour boutton en CSS

Résolu/Fermé
blaz32 Messages postés 155 Date d'inscription jeudi 27 juin 2013 Statut Membre Dernière intervention 28 août 2014 - Modifié par blaz32 le 27/08/2013 à 12:15
salim_1305 Messages postés 60 Date d'inscription lundi 18 novembre 2013 Statut Membre Dernière intervention 7 novembre 2018 - 5 déc. 2013 à 15:26
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 ;-)

5 réponses

Angelneonizz Messages postés 788 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
27 août 2013 à 12:44
2
fr-darkrod Messages postés 422 Date d'inscription vendredi 16 août 2013 Statut Membre Dernière intervention 14 novembre 2020 23
Modifié par fr-darkrod le 29/08/2013 à 15:53
<!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.
1
blaz32 Messages postés 155 Date d'inscription jeudi 27 juin 2013 Statut Membre Dernière intervention 28 août 2014 10
Modifié par blaz32 le 29/08/2013 à 16:05
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 ;-)
0
blaz32 Messages postés 155 Date d'inscription jeudi 27 juin 2013 Statut Membre Dernière intervention 28 août 2014 10
29 août 2013 à 16:21
Merci :-)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
salim_1305 Messages postés 60 Date d'inscription lundi 18 novembre 2013 Statut Membre Dernière intervention 7 novembre 2018 1
5 déc. 2013 à 15:26
je pense que ça marche
0