Contraire de :hover pour boutton en CSS
Résolu
blaz32
Messages postés
155
Date d'inscription
Statut
Membre
Dernière intervention
-
salim_1305 Messages postés 60 Date d'inscription Statut Membre Dernière intervention -
salim_1305 Messages postés 60 Date d'inscription Statut Membre Dernière intervention -
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 - Guide
- Tape jam dymo - Forum Matériel & Système
- Changer nom utilisateur windows 10 - Guide
- Idée nom d'utilisateur snapchat - Guide
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