fatah fatah -4 years ago 112
CSS Question

Image button with hover state

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?

Answer Source

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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download