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

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

...

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

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