Adding "active" color for custom Kendo UI grid button

Lasse Edsvik

I'm trying to add a colorful custom button to a Kendo UI grid.

It works great except for the active state. Background color doesnt get overrided.

HTML:

<a class="k-button k-button-icontext k-grid-details" href="#">
    <span class=" "></span>
 Details</a>

CSS:

.k-grid-details {
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    width: 50px;
    border-color: #003399;
    background-color: #003399;
    background: linear-gradient(#003399, #000167);
}

    .k-grid-details:hover {
        border-color: #003399;
        color: #fff;
        background-color: #003399;
    }

    .k-grid-details .k-state-active,
    .k-grid-details:active {
        background-color: #003399;
    }

What might be missing?

dippas

Look at this FIDDLE

your problem is that you are using background + background-color in your .k-grid-details but when you hover and active the .k-grid-details just do the background-color, therefore the background (which contains linear-gradient(#003399, #000167))stays on hover and active state. so you must join background-color and background, making it shorthand, like this:

background: #039 linear-gradient(#003399, #000167)

you can see more for background shorthand HERE

then in your hover and active state just after the background color, you set none for the linear-gradient, like this:

.k-grid-details:hover {
        background: #ff0 none;
}

.k-grid-details:active {
        background: #f00 none;
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Kendo Grid custom action button icon

Cannot refresh Kendo Grid by a custom button?

Kendo UI grid custom filter with default functionality outside of the box

Kendo UI Grid Anuglar Cell Color

How to generate a custom button that submits cell data from its uid in Kendo UI Grid MVC?

Kendo UI for Angular custom sorting grid column

Adding custom buttons to Kendo grid toolbar in ASP.NET Core

Kendo UI Grid adding new record not posting data to server side

Material UI Adding Custom Color in Theme Not Recognized

Kendo Ui Grid not rebinding after search button click

kendo ui Editable color input field on grid

Custom Kendo UI Grid Footer - Update Dynamically

How to custom tooltip such as contains some button in grid's cell tooltip in Kendo UI MVC?

Kendo UI Grid - How to save current radio button state

how to check and change color of cell value in kendo ui grid

Display Custom Command Button Kendo UI Grid in MVC with Conditional Authorization Role

Kendo Grid -> How to trigger custom method on Add click button

kendo-ui grid custom editor multiselect set value

Kendo Grid custom command button shown dynamically

kendo ui grid edit button not working after loading persisting state

Adding custom validation to Kendo Grid display?

Kendo Grid UI with custom function

Adding custom button to PE SDK UI

mouseover or mouseenter or onhover event for Kendo Grid custom button?

Custom template in kendo-ui grid column with inconsistent data type

How to use a template when adding a new row to kendo ui grid?

Addition of Custom button in Kendo Grid using Kendotoolbar and kendo toolbar button

jquery kendo ui: Grid with custom autocomplete column

Display checkbox or switch instead custom button kendo grid