CODEWITHSUNDEEP
htmlcss
fatah
fatah

Reputation: 633

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?

Upvotes: 0

Views: 2782

Answers (2)

Runnick
Runnick

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

PatrickKelly
PatrickKelly

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

Related Questions