Untitled

Button hover effect not showing after button is clicked/focused
<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>

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

.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}

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

.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);
}