This is a migrated thread and some comments may be shown as answers.

Changing the BackColor of a Standard Button

4 Answers 311 Views
Button
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 23 Sep 2014, 03:01 AM
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

4 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 25 Sep 2014, 02:55 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Robert
Top achievements
Rank 1
answered on 25 Sep 2014, 08:07 PM
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
0
Danail Vasilev
Telerik team
answered on 29 Sep 2014, 01:56 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Robert
Top achievements
Rank 1
answered on 29 Sep 2014, 02:09 PM
Thank you, Danail!
Tags
Button
Asked by
Robert
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Robert
Top achievements
Rank 1
Share this question
or