Button hover effect not showing after button is cl

Question

I'm developing a web application using the Vaadin framework.

I have a Button styled as BaseTheme.BUTTON_LINK and have an icon showing. The button is assigned a CSS class which has a hover state, when the button is hovered the icon is replaced. Simple enough.

However, I find that once the button is clicked, the hover stops working until you click elsewhere. The button seem to be focused after clicking and then the hover effect doesn't work.

Does anyone know a way to work abound this, either using Vaadin or CSS?

EDIT: HTML and CSS added

HTML:

<div style="height: 26px; width: 292px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
  <div style="float: left; margin-left: 0px;">
    <div class="v-button v-button-link link v-button-m2m-refreshbutton m2m-refreshbutton" tabindex="0" role="button">
      <span class="v-button-wrap">
        <img class="v-icon" alt="" src="/M2M/VAADIN/themes/m2m/../m2m/img/refresh_.png">
        <span class="v-button-caption"></span>
      </span>
    </div>
  </div>
</div>

CSS:

.m2m-refreshbutton:hover {
    background: url("../m2m/img/refresh_hover.png") no-repeat center;
}

Answer 1

I encountered the same problem when I used Vaadin to create Liferay portlet. I was able to fix it by changing the CSS Vaadin uses (by using the CSS Inject Add-on, but it is also possible to just provide a custom Vaadin theme). The piece of CSS that worked for me is:

.v-button:active .v-button-wrap, .v-button.v-pressed .v-button-wrap, .v-button:focus .v-button-wrap {
background: #d4d4d4 url(/html/themes/classic/images/portlet/header_bg.png) repeat-x 0 0 !important}

Answer 2

In general it is a better idea to do this with background-images in CSS only.

You should also use an <a></a> tag for this because older Internet Explorers for example don't apply link states to HTML elements other than <a></a>.

Basically getting different images for the different states of a link can be done like this:

HTML:

<a class="someClass" href="location"></a>

CSS:

.someClass {
    background-image: url(path_from_css_file/link.png);
    background-repeat: no-repeat;
    background-position: top left;
}

.someClass:hover {
    background-image: url(path_from_css_file/link_hover.png);
}

.someClass:focus {
    background-image: url(path_from_css_file/link_focus.png);
}

.someClass:active {
    background-image: url(path_from_css_file/link_active.png);
}

.someClass:visited {
    background-image: url(path_from_css_file/link_visited.png);
}