Adding "active" color for custom Kendo UI grid button

Question

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?

Answer 1

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;
}