Reputation: 633
I am having trouble to make an image button, It doesn't display properly.
HTML
<div class="icon">
<a role="button"></a>
</div>
CSS
.icon{
background: url('assets/icon.png')
}
.icon:hover{
background: url('assets/icon-hover.png')
}
Is there a better way to do this?
Upvotes: 0
Views: 2782
Reputation: 715
You shouldn't use div as a button (it's not clickable), single <a>
will suffice.
<a href='#' class="btn">Button</a>
Depending on your goal you might want to use <button>
For when to use what see: https://css-tricks.com/use-button-element/
Since you have link without text, it won't show anything as background; as @PatrickKelly mentioned you need to set width and height and change display to inline block because by default <a>
is inline.
.btn {
display: inline-block;
width: 50px;
height: 50px;
}
Having image links/buttons without text is bad for accessibility (screen readers). See 13 here: https://www.sitepoint.com/15-rules-making-accessible-links/
Upvotes: 1
Reputation: 98
I believe your issue is related to the div not having any content. Try adding a width and height to the div that matches the dimensions of the icon.png
.icon {
width: 50px;
height: 50px;
}
Upvotes: 2