5

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

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

背景两种纯色 悬停时

颜色：

  • 蓝色：（#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/

非常感谢您的帮助

4

6 回答 6

9

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

}

在下半部分，最终颜色将是您设置的颜色。在上半部分，它会更轻，因为它与渐变的白色混合。

这足以让它工作，请参阅演示

要使上半部分更亮或更暗，您需要调整背景图像中的最后 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 色外观但更改基色时，也可以使用此技术。您在一个类中设置颜色，在另一个类中设置渐变。

于 2013-05-20T18:09:51.923 回答
4

使用这种类型的渐变集：

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

于 2013-05-20T08:05:40.653 回答
1

与评论中另一个 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>
于 2013-05-20T08:00:20.923 回答
1

您可以通过将渐变的 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/

于 2013-05-20T08:06:06.060 回答
1

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

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

第一：用 size: width = 1px; 分割你的背景图片 高度 = 图像的高度并以 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;
}
于 2013-05-20T08:46:36.653 回答
1

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

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

给盒子内侧的阴影，非常整洁。

于 2014-06-02T03:57:15.493 回答