Button Hover while Disabled 'hides' button background

[J]

I have the following button declared:

<telerik:RadButton ID="btnProcessPayment" runat="server" Text="Process Payment" CssClass="btn-red-strip"
    Style="float: left;" ButtonType="SkinnedButton" EnableTheming="false"
    OnClick="btnProcessPayment_Click" Height="48px" Enabled="false"
    DisabledButtonCssClass="btn-gray-l"
    HoveredCssClass="btn-red-strip" SingleClick="True"
    SingleClickText="Processing..." EnableEmbeddedSkins="False" />

The button is disabled by default until the user checks a box.  Here is the checkbox event handler:

protected void chkPaymentMsgAck_CheckedChanged(object sender, EventArgs e)
{
    btnProcessPayment.Enabled = chkPaymentMsgAck.Checked;
}

This is the related CSS:

.btn-red-strip
{
    background: url("images/btn-drk-red-strip.jpg") repeat-x scroll 0 0 transparent;
    color: white;
    display: block;
    height: 48px;
    line-height: 48px;
    padding: 0 10px;
    cursor: pointer;
}

.btn-gray-strip
{
    background: url("images/btn-gray-strip.jpg") repeat-x scroll 0 0 transparent;
    color: white;
    display: block;
    height: 48px;
    line-height: 48px;
    padding: 0 10px;
    cursor: pointer;
}

Everything displays fine when the button is enabled or disabled BUT when it is disabled and then mouse-over'ed, the button background disappears.  I can get rid of this behavior by enabling the built-in styling instead but I want the button to follow the same look as the rest of the site (which don't use RadControls).

[Danail Vasilev]

Hi Juan,

The SkinnedButton uses CSS3 for configuring rounded corners and gradient. It is a light version of the standard button but without sprites and is supported by browsers that use CSS3.

Disabling the enabled skins of the SkinnedButton and setting a background image to it, triggers button's base state which in turn hide the background image on hover.

I can suggest you instead of using the SkinnedButton to use the Image Button, because it lets you easily specify particular images and styles for the particular states of the enabled/disabled button. This help article as well as this online demo will spread more light on how to do that.

Kind regards,
Danail Vasilev
the Telerik team

[J]

Thanks.  I'll give that a try when I have time to get back to that project.