Question

I have a button and I’ve added a gradient to it.

Here is the code:

.mybutton {
    background: #258dc8; /* Old browsers */
    background: -moz-linear-gradient(top,  #258dc8 0%, #258dc8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#258dc8), color-stop(100%,#258dc8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #258dc8 0%,#258dc8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #258dc8 0%,#258dc8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #258dc8 0%,#258dc8 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #258dc8 0%,#258dc8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
}

My problem is that in the hover state I want to get rid of the gradient and just have a plain background color.

.mybutton:hover {
    background-color: #333333;
}

For some reason this is not working as it’s not getting rid of the gradient.
The only way I’ve been able to change the gradient is by adding another gradient.

Is there a way to disable the gradient?

I’ve also tried background: none; but this didn’t do it.

Answer 1

Gradients are image values, so setting background-color alone won’t affect your gradient. You’ll specifically want to override the background-image property (as well as filter while you’re at it):

.mybutton:hover {
    background-color: #333333;
    background-image: none;
    filter: none;
}

If you use the shorthand background: none, you’re setting both the color and the image (none maps to background-image and omitting a color sets that to transparent), so you’ll get a transparent background instead.

Of course, you could use the shorthand to declare just the color instead, and the image will implicitly be none:

.mybutton:hover {
    background: #333333;
    filter: none;
}