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;

Solution 1

What you really need is this:

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

Solution 2

Are you sure :active is the status you are looking for? The :active status only shows while you are clicking the button (mouse button is down). Once the button is released, the status is no longer :active.

Comments

[Alex Reds]

@csdragonchick thanks for your responce. Yeah that is exactly what I'm using usually for such cases :) Do you know another ways of imitating a pushing of real-physical buttons? As far as I know the :active state is exactly what is for, a real push and release state of button. In conjunction with 3d css effects it works real :)

[Andy Giesler]

Thanks -- I was looking for a selector more specific than "none", and I didn't realize linear-gradient is a form of background-image.

[Devner]

@AndyGiesler The active state will inherit the styles from the default state. So when you use background property, you can be more specific with the choices. So you can use background-color and background-image in the same class. When you use CSS3 gradients, the linear gradient is auto-assigned to the background-image property and hence you need to make it as none. So you have only 2 properties that you can use i.e. background-image: none and background-color: transparent and to make it flat just like you wanted, my answer is already available.