Hey guys,
I am trying to achieve a button hover effect so that a different image as loaded and i can basically lower the opacity. The problem is the hover effect loads the new image to the left of the buttons and i cant work out why. I added the stylesheet to the button .rbiButtonStyle.
<div role="button" class="v-button v-button-rbiButtonStyle rbiButtonStyle" tabindex="0"><span class="v-button-wrap"><img src="/CredoWeb/VAADIN/themes/Theme2/icons/RBITemplate.png" class="v-icon" alt=""><span class="v-button-caption">RBI</span></span></div>
.gridLayout .v-button {
display: block;
height: 200px;
background: transparent;
border: none;
text-align: center;
opacity: 0.8;
}
.gridLayout .v-button img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}
.gridLayout .v-button span {
text-shadow: #fafafa 1px 1px 0;
}
.gridLayout .v-button .v-button-wrap,
.gridLayout .v-disabled.v-button .v-button-wrap {
background: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.gridLayout .v-button:active .v-button-wrap,
.gridLayout .v-button.v-pressed .v-button-wrap {
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.gridLayout .rbiButtonStyle:hover{
background: url("icons/WorkflowTemplate.png") no-repeat;
opacity: 1;
}
Can anyone help?
Thanks,
Douglas