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

Question

如何使按钮的背景为两种纯色？请参阅下面的示例。

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

颜色:

• 蓝色:#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我已为此查询设置:https://jsfiddle.net/DMc9N/

非常感谢您的帮助

Answer 1

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。

唯一不足的是hover状态下的浅灰色不能精确控制，随便怎么调。您还可以在悬停状态下设置背景图像，例如

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%);
    ...

但那是不会过渡的(不过差别不是太大的话效果还是可以的)

顺便说一句，当您希望多个元素具有相同的双色外观但改 rebase 色时，也会使用此技术。您在一个类中设置颜色，在另一个类中设置渐变。