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

Material skin

3 Answers 232 Views
Button
This is a migrated thread and some comments may be shown as answers.
Kjell
Top achievements
Rank 1
Iron
Kjell asked on 09 Jul 2018, 11:23 AM
How to change the background color to blue for Material skin

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 09 Jul 2018, 12:44 PM
Hello Kjell,

One way is to create a custom skin with the desired color: https://docs.telerik.com/devtools/aspnet-ajax/theme-builder/create-and-download.

Another is to inspect the rendered HTML and create a CSS override that will apply the desired modification. For example:

<style>
button.RadButton_Material.rbButton{
    background-color: blue;
}
 
button.RadButton_Material.rbButton.rbHovered:hover{
    background-color: aqua;
}
</style>
<telerik:RadPushButton runat="server" id="rbp1" Skin="Material" Text="blue material button"></telerik:RadPushButton>


Regards,
Marin Bratanov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Greg
Top achievements
Rank 1
answered on 11 Jul 2018, 11:56 PM

Marin:

That works if you want to change ALL buttons to the same color.

How do we create CSS that allows us to have many different button colors: e.g. I want a red button, blue button, green button, orange button, etc.? I want to assign to a button a class that changes the hovered state appearance, etc. based on the example colors above.

0
Marin Bratanov
Telerik team
answered on 12 Jul 2018, 05:31 AM
Hello Greg,

You should cascade the rules through the specific class you set. 

Here's an example:

<style>
    button.RadButton_Material.rbButton.blue {
        background-color: blue;
    }
 
    button.RadButton_Material.rbButton.rbHovered.blue:hover {
        background-color: aqua;
    }
 
    button.RadButton_Material.rbButton.red {
        background-color: red;
    }
 
    button.RadButton_Material.rbButton.rbHovered.red:hover {
        background-color: pink;
    }
</style>
<telerik:RadPushButton CssClass="blue" runat="server" ID="rbp1" Skin="Material" Text="blue material button"></telerik:RadPushButton>
<telerik:RadPushButton CssClass="red" runat="server" ID="rbp2" Skin="Material" Text="red material button"></telerik:RadPushButton>


Regards,
Marin Bratanov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Button
Asked by
Kjell
Top achievements
Rank 1
Iron
Answers by
Marin Bratanov
Telerik team
Greg
Top achievements
Rank 1
Share this question
or