PressedCssClass

[Christian]

Hi

For our site I use the Metro Skin, however for certain buttons I want to overwrite the Background color. I am able to do this except for when the button is pressed. I created a CSS class and used the PressedCssClass but it doesn't do anything. Here is my code

<td align="right" height="30">
        <telerik:RadButton ID="RadButton3" runat="server"  ButtonType="LinkButton" OnClick="orderupdate_Click" PressedCssClass="buttonpressed" HoveredCssClass="buttonpressed">
        </telerik:RadButton>
</td>

and the CSS class

.buttonpressed {
    background-color: #000000 !important;
   }

thank you

[Danail Vasilev]

Hi Christian,

What I can suggest is that you declare a more specific selector rather than using the !important clause. This will avoid the conflict with the importance of the CssClasses. For example:

<style>
    html body form .RadButton.RadButton_Default.rbLinkButton.buttonhovered {
        background-color: green;
    }

    html body form .RadButton.RadButton_Default.rbLinkButton.buttonpressed {
        background-color: red;
    }
</style>

ASPX:

<telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" PressedCssClass="buttonpressed" HoveredCssClass="buttonhovered" Text="Click">
</telerik:RadButton>

Regards,
Danail Vasilev
Telerik

[Christian]

Hi

I added the code and when I hover over the button it turns green and when I click it it turns red. However, if I remove my cursor over the button, it turns blue before the page is reloaded. Is there another state other than Pressed and Hover that I have to change?

thank you

[Danail Vasilev]

Hi Christian,

Generally the RadButton has three types of states - normal, hover (when the mouse pointer is placed over the button) and active (when the button is clicked). The exception is the LinkButton which doesn't have embedded styles for the active state, however, it can be easily set through the PressedCssClass property. For example:

<style type="text/css">
    /*Normal State*/
    html body form .RadButton.RadButton_Default.rbLinkButton {
        background-color: lightblue;
    }
    /*Hover State*/
    html body form .RadButton.RadButton_Default.rbLinkButton:hover {
        background-color: green;
    }
    /*Active State*/
    html body form .RadButton.RadButton_Default.rbLinkButton.buttonpressed {
        background-color: red;
    }
</style>

ASPX:

<telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" Text="Click" PressedCssClass="buttonpressed">
</telerik:RadButton>

I have also created a short video that illustrates the switching of the three states - the normal state has a lightblue color for the background-color; the hover state has a green color for the background-color and the active state has a red color for the background-color.

If the above information, however, is not useful enough could you please elaborate more into the issue, so that we can provide a reliable solution if possible?

You may also find useful CSS Skin File Selectors help article.

Regards,
Danail Vasilev
Telerik