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

与 cmets 中另一个 stackoverflow 答案的链接中给出的示例相比，HTML 更少，语义示例略多：

https://jsfiddle.net/63Esq/2/

.fancyButton {
    width:100px;
    display:inline-block;
    position:relative;
    background-color:#2B8DCF;
}
.fancyButton span {
    width:100%;
    display:inline-block;
    position:absolute;
}
.fancyButton .bg {
    height:50%;
    top:0;
    background-color:#4098D3 ;
}
.fancyButton .text {
    position:relative;
    text-align:center;
    color:#fff;
}

<a href="#" class="fancyButton">
    <span class="bg"></span>
    <span class="text">hi</span>
</a>

Answer 2

使用这种类型的渐变集：

background: #2989d8; /* Old browsers */
background: -moz-linear-gradient(top, #2989d8 50%, #207cca 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#2989d8), color-stop(51%,#207cca)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2989d8 50%,#207cca 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2989d8 50%,#207cca 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2989d8 50%,#207cca 51%); /* IE10+ */
background: linear-gradient(to bottom, #2989d8 50%,#207cca 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */

http://codepen.io/Chovanec/pen/qALes

Answer 3

您可以通过将渐变的 2 个位置设置为相同的值来实现此目的。在您的示例中，它将是 2 50% 的值。

蓝色

background: linear-gradient(to bottom, #4098d3 0%,#4098d3 50%,#2b8dcf 50%,#2b8dcf 100%);

灰色

background: linear-gradient(to bottom, #515758 0%,#515758 50%,#2B8DCF 50%,#2B8DCF 100%);

jsfiddle 上的演示https://jsfiddle.net/mm3Rz/

Answer 4

最适合您的选择： http://colorzilla.com/gradient-editor/ 支持所有浏览器网页。 :)

如果你想完美展示，我认为你可以切片图像背景。可能是这样的：

首先：将背景图片切片，大小为：width = 1px; height = 图片的高度并以 PNG 格式保存以获得最佳尺寸和质量。

第二个：按钮的 CSS

button.submit {
        background: url(your-background.png) repeat-x left center; }

button.submit:hover {
        background: url(your-background-hover.png) repeat-x left center;
        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;
}

Answer 5

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

但是那是不会过渡的（不过，如果差别不是太大，效果就足够了）

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

Answer 6

css3 你可以试试这样的：

box-shadow: inset 0px 24px 0px rgba(255, 255, 255, 0.14);

在盒子里面给阴影，很整洁。