Question

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

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

background two solid colors on hover

颜色：

蓝色：＃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/

非常感谢您的帮助

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个。

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

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

但这不会过渡（但是，如果差异不是太高，效果就足够了）

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

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

在评论中链接到另一个stackoverflow答案的链接中给出的HTML和语义示例更少：

http://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 4

您可以通过将渐变的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 http://jsfiddle.net/mm3Rz/

Answer 5

最适合您的选择： 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 6

css3你可以尝试类似的东西：

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

把阴影放在盒子的内侧，非常整洁。

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

6 个答案: