CSS – original vs. custom style sheet – correct way to overwrite styles

I am using a WordPress theme that uses its own styling of the buttons. The following lines are the part of the CSS :

.button {
   background: #333 !important;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222))  !important;
   background: -moz-linear-gradient(0% 0% 270deg,#333, #222) !important;
}

I am using my own custom style sheet and I would like to overwrite these styles, but all I need to do is to change the background color and remove the gradient.

If I only keep the line changing the background color in my style sheet like this :

.button {
   background: #353535 !important;
}

Then the gradient is still displaying because it is in the original stylesheet.

If I set the gradient lines as background: none; then it will affect the first line where I changed the color, so nothing will display.

So I have done it this way instead :

.button {
    background: #353535 !important;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#))  !important;
    background: -moz-linear-gradient(0% 0% 270deg,#, #) !important;
}

I removed the gradient colors.

It works, but this is probably not the way to do this.

Is there a proper way to remove the gradient styles in a custom css style sheet ??