J'ai des problèmes pour créer un bouton d'image, il ne s'affiche pas correctement.Bouton Image avec état stationnaire
HTML
<div class="icon">
<a role="button"></a>
</div>
CSS
.icon{
background: url('assets/icon.png')
}
.icon:hover{
background: url('assets/icon-hover.png')
}
est-il une meilleure façon de le faire?
Je crois que votre problème est lié à la div n'ayant aucun contenu. Essayez d'ajouter une largeur et la hauteur à la div qui correspond aux dimensions de la icon.png
.icon {
width: 50px;
height: 50px;
}
qui fonctionne mais comment le rendre réactif? – fatah
Si vous voulez juste utiliser css, vous devez fournir différentes largeurs et hauteurs aux points d'arrêt que vous soutenez – PatrickKelly
Vous ne devriez pas utiliser div comme un bouton (ce n'est pas cliquable), seul <a> suffit.
<a href='#' class="btn">Button</a>
En fonction de votre objectif, vous pouvez utiliser <button> Pour quand utiliser ce voir: https://css-tricks.com/use-button-element/
Puisque vous avez sans lien texte, il ne montrera pas quoi que ce soit comme arrière-plan; comme @PatrickKelly mentionné que vous devez définir la largeur et la hauteur et changer l'affichage en bloc en ligne parce que par défaut <a> est en ligne. Avoir des liens d'image/boutons sans texte est mauvais pour l'accessibilité (lecteurs d'écran). Voir 13 ici: https://www.sitepoint.com/15-rules-making-accessible-links/
pouvez-vous ajouter une version plus complète du code html et css dans un violon js pour nous de vérifier? –