5

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;

2
  • 1
    Are you sure background: orange doesn't already do it? It should, since it implicitly sets background-image: none which should override your gradient.
    – BoltClock
    Nov 5, 2012 at 19:27
  • Wohoo! Thank you guys. Seems the question is sorted! background-image:none; turns off any previous gradients. At least now on a click I have a flat orange. @BoltClock I don't why in my understanding it suppose to override the gradients but in my case it doesn't. Noticed that issue not for the first time
    – Alex Reds
    Nov 5, 2012 at 19:38

2 Answers 2

20

What you really need is this:

button:active {
    background-image: none;
    background-color:orange;
}
2
  • 3
    Thanks -- I was looking for a selector more specific than "none", and I didn't realize linear-gradient is a form of background-image. Aug 7, 2014 at 15:39
  • 1
    @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.
    – Devner
    Aug 26, 2014 at 5:46
4

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.

1
  • @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 :)
    – Alex Reds
    Nov 5, 2012 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.