Button Hover while Disabled 'hides' button background

3 posts, 1 answers
  1. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 19 Mar 2013 Link to this post

    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).
  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 22 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 22 Mar 2013 Link to this post

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