Hi there,
Please can you advise how I can change the background colour of a standard button (with class "k-button") for the click event. Currently it goes orange when you click it, but I need it to go blue to keep in line with my site colour themeing. This is my markup :-
<a class="k-button" href="#" onclick="addNote();">Add Note</a>
This button is inside a Kendo window control ​toolbar, but I am sure I'll need it generally across the site.
Thanks, Mark
5 Answers, 1 is accepted
If you want to change the color for the state of the button when you click on it you could override the following CSS selector:
<
style
>
.k-button.k-state-focused,
.k-button.k-state-focused:hover{
background-color: blue;
}
</
style
>
You can test the above approach at the following link:
Hope this helps.
Regards,
Konstantin Dikov
Telerik

Hi Konstantin,
I'm afraid that didn't work - it's still orange when I clock onto it. The button is inside a grid which is inside a Kendo window - not sure if that makes a difference. I even tried adding !important to the style but no difference. Here's my CSHTML file code (there are 4 buttons which all have the issue) :-
<style type="text/css">
.k-button.k-state-focused, .k-button.k-state-focused:hover {
background-color: blue !important;
}
</style>
@( Html.Kendo().Grid((IEnumerable<Models.PortalUserNoteViewModel>)ViewData["Notes"])
.Name("grid")
.Sortable()
.DataSource(datasource => datasource
.Ajax()
.Sort(sort => sort.Add("Created").Descending())
.ServerOperation(false)
)
.Columns(columns =>
{
columns.Bound(sv => sv.ItemNo).Title("Ref.");
columns.Bound(sv => sv.CreatedFormatted).Title("Taken");
columns.Bound(sv => sv.Note).Title("Description");
columns.Bound(sv => sv.PortalUser).Title("Added By");
columns.Bound(sv => sv.Company).Title("Company");
})
.ToolBar(tools =>
{
tools.Template(@<text>
<div class="toolbar">
<a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>
<div style="float:right;">
<a class="k-button" href="#" onclick="addNote('@ViewData["NoteType"]', '@ViewData["NoteTypeID"].ToString()');">Add Note</a>
<a class="k-button" href="#" onclick="printNotes();">Print</a>
<a class="k-button" href="#" onclick="closeNoteWindow();">Close</a>
</div>
</div>
</text>);
})
.Events(e => e
.ExcelExport("excelExport")
.DataBound("portalUserNotesDatabound"))
.Excel(excel => excel
.FileName("JobLog.xlsx")
.AllPages(true))
)​
Any more suggestions to fix this?
Thanks, Mark
Hello Mark,
Maybe this will help:
As you are not using the Kendo UI Button, but just the regular button where the styles are applied differently.
Regards,
Kiril Nikolov
Telerik

Thanks Kiril,
That worked perfectly. I also added box-shadow: none and border: none to remove the orange border too.
Thanks, Mark
Hello Mark,
I am happy to the problem is now resolved.
In case something else comes up - do not hesitate to contact us.
Regards,
Kiril Nikolov
Telerik