Changing the BackColor of a Standard Button

5 posts, 0 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 22 Sep 2014 Link to this post

    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
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 25 Sep 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 25 Sep 2014 in reply to Danail Vasilev Link to this post

    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
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 29 Sep 2014 Link to this post

    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.

     
  6. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 29 Sep 2014 in reply to Danail Vasilev Link to this post

    Thank you, Danail!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017