Changing the BackColor of a Standard Button

[Robert]

Here's my preliminary layout code for a simple button:

<telerik:RadButton ID="buttonReport" runat="server" AutoPostBack="true" Text="Summary" Font-Size="X-Small" BackColor="LightBlue" Icon-PrimaryIconCssClass="rbPrint" />

Why can't I set the background color?

Robert

[Danail Vasilev]

Hi Robert,

RadButton ButtonType="StandardButton"(i.e., default value) uses sprite images for its background and therefore you must change the used sprite.

I can also suggest that you use the "SkinnedButton" instead that relies entirely on CSS3 and HTML5. For example:
CSS:

<style>
    html .RadButton.RadButton_Default.rbLinkButton {
        background-color: green;
         background-image: none;
    }
</style>

ASPX:

<telerik:RadButton ID="buttonReport" ButtonType="SkinnedButton" runat="server" AutoPostBack="true" Text="Summary" Font-Size="X-Small" Icon-PrimaryIconCssClass="rbPrint" />

You can also inspect and modify the corresponding CSS for the hover/active state of the button.

Regards,
Danail Vasilev
Telerik

 

 

[Robert]

Danail,

Thanks for your assistance.  I just tried it out.

I do like the coloured background but unfortunately this approach loses the rounded corners and the button no longer functions like a typical "Button" when the user hovers over it and presses it.

Too bad there isn't a simple way to change the background color to something other than grey.

Robert

[Danail Vasilev]

Hello Robert,

You can use the following styles for the hover and the active state of the button:
CSS:

<style>
    html .RadButton.RadButton_Default.rbLinkButton {
        background-color: green;
        background-image: none;
    }

        html .RadButton.RadButton_Default.rbLinkButton.rbHovered,
        html .RadButton.RadButton_Default.rbLinkButton:hover {
            background-color: blue;
            background-image: none;
        }

        html .RadButton.RadButton_Default.rbLinkButton:active {
            background-color: red;
            background-image: none;
        }
</style>

ASPX:

<telerik:RadButton ID="buttonReport" ButtonType="SkinnedButton" runat="server" AutoPostBack="true" Text="Summary" Font-Size="X-Small" Icon-PrimaryIconCssClass="rbPrint" />

As for the rounded corners they will not be applied to the button in older browsers that do not support CSS3 like IE7/IE8. If, however, you are targeting these browser I can suggest that you keep on with the StandardButton type and modify the sprite of the RadButton. You can also do that with the free Telerik Visual Style Builder tool (see also the documentation).


Regards,
Danail Vasilev
Telerik

 

 

[Robert]

Thank you, Danail!