3 Answers, 1 is accepted
0
Hello Kjell,
Regards,
Marin Bratanov
Progress Telerik
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
Hello Greg,
Regards,
Marin Bratanov
Progress Telerik
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.