I have customized a button by adding a gradient to it.
Below is the code snippet:
.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 */
}
In its hover state, I want to remove the gradient and display a solid background color instead.
.mybutton:hover {
background-color: #333333;
}
Despite trying background: none;, the gradient does not seem to be removed.
The only solution so far has been to overwrite the gradient with another one.
Is there a way to completely disable the gradient effect?
I have also attempted to use background: none; but unfortunately, this did not work as desired.