How do I remove gradient on :active state?

Question

I need to make a button look flat on the :active state.

Let's say, for instance, I have:

button {
    background:linear-gradient(#fc9, #ed8) /* some light orange gradient */
}
button:hover {
    background:linear-gradient(#ed8, #da7) /* some darker orange gradient on hover */
}
button:active {
    background:orange; /* And here I need just plane flat orange color */
}

<button>Click Me!</button>

But instead of that, I am getting the gradient from the previous state.

Are there any background CSS properties to kind of turn off that gradient?

e.g. blackground:liner-gradient-OFF; or background:no-inherit;

Answer 1

What you really need is this:

button:active {
    background-image: none;
    background-color:orange;
}