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
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
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.
- Mot de passe administrateur - Guide
- Cliquez sur ce lien. en n'utilisant que le clavier, quel mot obtenez-vous ? ✓ - Forum souris / Touchpad
- Le nom du champ de tableau croisé dynamique n'est pas valide ✓ - Forum Excel
- Nom de l'adresse - Forum Réseaux sociaux
- Trouver un numéro de portable avec un nom ✓ - Forum Mobile
5 réponses
Angelneonizz
Messages postés
784
Date d'inscription
mardi 9 décembre 2003
Statut
Membre
Dernière intervention
19 février 2018
137
27 août 2013 à 12:44
27 août 2013 à 12:44
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
fr-darkrod
Messages postés
418
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
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.
<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.
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
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 ;-)
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 ;-)
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
29 août 2013 à 16:21
Merci :-)
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
5 déc. 2013 à 15:26
je pense que ça marche
