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/

非常感谢您的帮助。

- Paul

---

有没有可能为按钮设置两种不同的背景颜色，使用CSS按钮？ - Hawili

@sylwia 无聊。我在很多地方使用渐变效果。我觉得两种相似的纯色可能会给人一种更锐利的感觉。 - Paul

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 如果想让上半部分亮度更高或更低，您需要调整background-image中的最后一个0.5。

唯一的缺点是，在hover状态下，您无法精确控制浅灰色所呈现的效果，它将是任意的。您可以在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%);
    ...

但是这种过渡效果并没有实现（然而，如果差异不太大，则效果足够好）

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

- vals

---

非常棒的答案。我确实考虑过它可能是某种白色透明度，但不知道如何实现。它完成了工作并得到了我的支持！谢谢。 - Paul

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

- Michal

---

正是我正在寻找的东西，但是，我有一个:hover转换背景效果，这段代码似乎停止工作。想法是按钮将是两种蓝色，然后在悬停时过渡到两种灰色。 - Paul

Answer 3

这是一个比评论中提供的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>

- seemly

---

是的，这看起来好多了。为了更改网站上的每个按钮，我们如何使用此方法来适应我在特定网站中使用的语法：<button class="submit"></button> - Paul

.text 将是按钮，另外两个元素可以是您认为最语义化的任何其他标签，比如 div、span 或类似的标签。就我个人而言，我更喜欢渐变选项，并且认为它应该是接受的答案。我只是提供了一个更简洁/语义化的版本，以回复您最初的帖子下的评论所提供的链接。 - seemly

如果你已经想要走这条路...那么你可以使用一些CSS3伪对象来保持标记干净，而不必使用令人讨厌的标签，例如<div class="background top"></div>。在这个方向上 ^_^ - Martin Turjak

马丁说得好。我只是习惯于为那些不应被提及的浏览器提供服务。 ;) - seemly

Answer 4

您可以通过将渐变的两个位置设置为相同的值来实现此操作。在您的示例中，这将是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/

- 2ne

---

这个解决方案还可以阻止后台转换工作。有什么想法吗？ - Paul

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;
}

- Sakata Gintoki

---

我喜欢你在那里所做的。喜欢它的简洁，但是可以看出它是两个渐变。我正在寻找一个全面的专业解决方案。不过，非常感谢你让我知道这个神奇的工具。 - Paul

微软有一个类似的工具，也许你会喜欢比较一下：http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/ - Paul

Answer 6

CSS3您可以尝试类似以下的内容：

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

为了在盒子内部产生阴影，非常不错。

- Medda86