CSS制作按钮的背景颜色两种不同的纯色而不是渐变

我怎样才能将按钮的背景设为两种纯色？请参阅下面的示例.

总体目标是按钮在悬停时从两种蓝色阴影过渡到两种灰色阴影.

颜色：

蓝色：#4098D3(浅色),#2B8DCF(深色)

灰色：#515758(浅色),#2B8DCF(深色)

HTML按钮语法：< button class =“submit”>< / submit>

CSS：

button.submit {
        [background CSS from this question] }

button.submit:hover {
        [background CSS from this question with alternate colors]
        cursor: pointer; 
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -ms-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        transition: background 0.5s linear;
}

请随意使用此JSFiddle我已为此查询设置：http://jsfiddle.net/DMc9N/

非常感谢您的帮助

Chovanec有部分答案,问题是你不能动画渐变.

可以给你带来好结果的折衷方案是像往常一样指定颜色,然后将它涂上半透明的白色渐变.

button.submit {
    background-color: #4098d3;
    color: #fff;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 51%);

}

在下半部分,最终颜色将是您设置的颜色.在上半部分,它会变得更亮,因为它与渐变的白色混合.

这足以让它发挥作用,请参阅Demo

要使上半部分更亮或更暗,您需要调整背景图像中的最后0.5.

唯一的缺点是你没有精确控制悬停状态下的浅灰色,它将是它发生的任何事情.例如,您也可以在悬停状态下设置背景图像

button.submit:hover {
    background-color: #515758;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.7) 51%);
    ...

但这不会过渡(但是,如果差异不是太高,效果就足够了)

顺便说一下,当您希望多个元素具有相同的双色外观但更改基色时,也会使用此技术.您可以在一个类中设置颜色,在另一个类中设置渐变.