任何颜色的渐变按钮的通用 CSS 样式答案

【问题标题】：Common CSS style for gradient buttons of any color任何颜色的渐变按钮的通用 CSS 样式
【发布时间】：2012-07-29 02:36:14
【问题描述】：

我希望能够在网页中动态创建任何颜色的漂亮按钮，而无需提前为每种颜色定义单独的 CSS 类。

使用带有 Alpha 通道的 CSS3 渐变似乎是最好的方法，将低不透明度渐变叠加在纯色背景色之上。

但是，我对 CSS 的了解还不够，甚至无法判断这是否可能，更不用说实际实现它了。

我在网络上找到了一些看起来很有帮助的资源：

有更多 CSS 经验的人能否告诉我这是否可行，或许可以向我指出其他资源以使其更容易实现？

【问题讨论】：

只是一个资源，可能会有所帮助，Ultimate CSS Gradient Generator。而且，在我看来，您的选项 3 听起来最好/最容易实施。
酷，谢谢！立即查看！
我使用该渐变生成器制作了一个透明渐变，效果非常棒！我将调整渐变（再次使用生成器），直到按钮看起来都很漂亮！
如果有人注意到问题的变化...我正在简化措辞以解释此解决方案的最小用例，并更改标签以表示实际使用的技术。只是一些基本的清理工作，这样这个问题可能对以后的其他人更有用。

标签： button css

【解决方案1】：

使用LESS 或SASS 之类的东西，这很容易合法地做到。像这样创建一个 mixin（健壮的版本）：

.auto-gradient(@color) {

    /* Use any of the built in functions like saturate() or spin() */
    @topcolor: lighten(@color, 20);
    @bottomcolor: darken(@color, 20);

    background: @color;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(@topcolor), to(@bottomcolor));
    background: -webkit-linear-gradient(@topcolor, @bottomcolor);
    background: -moz-linear-gradient(@topcolor, @bottomcolor);
    background: -ms-linear-gradient(@topcolor, @bottomcolor);
    background: -o-linear-gradient(@topcolor, @bottomcolor);
    background: linear-gradient(@topcolor, @bottomcolor);

        /* If using PIE.htc for IE */
    -pie-background: linear-gradient(@topcolor, @bottomcolor);
    behavior: url(pie.htc);
}

用法：

.my-button {
    .auto-gradient(darkviolet);
}

这将编译为有效的 CSS(3)，它应该是这样的：

.my-button {
  background:darkviolet;
  background:-webkit-gradient(linear,0 0,0 bottom,from(#c43aff),to(#4c006d));
  background:-webkit-linear-gradient(#c43aff,#4c006d);
  background:-moz-linear-gradient(#c43aff,#4c006d);
  background:-ms-linear-gradient(#c43aff,#4c006d);
  background:-o-linear-gradient(#c43aff,#4c006d);
  background:linear-gradient(#c43aff,#4c006d);
}

注意：我自己使用 lessphp，而我现在使用的版本似乎会阻塞命名颜色，例如 DarkViolet 被传递给 lighten/darken，除非它们是小写的。

【讨论】：

LESS 看起来真的很酷，非常适合这样的事情。但是，上面 MrOBrian 评论中提到的解决方案现在对我来说已经足够好了。不过还是谢谢你的建议！
当您说“以编程方式”时，我想我认为您的意思是您想要编写一个自动解决方案，而不是手动使用在线第三方工具来逐个创建渐变。是否有一些我不知道的 API，因为我以为你说颜色在你的数据库中？我也没有看到任何可以从单一颜色自动创建渐变的东西。我误解了这个问题吗？
不，你明白了。我使用第三方工具创建了一个透明渐变，它覆盖在纯色之上。每个按钮使用通用按钮绒毛和覆盖层的 CSS 代码，然后它自己的背景颜色派生按钮的主颜色。在这里，我会做一个小提琴......
在上面的自我回答中添加了一个 JSFiddle。这是一种自动解决方案，但非常简单，不涉及其他框架。您的建议没有任何问题，确实对于较大的项目来说这将是理想的；这次我只是想尝试一些更简单的东西。
啊，我知道你做了什么，好主意，看起来不错。我还处于石器时代，有很多前端的东西，因为我必须支持 IE7，因此 PIE.htc 参考。事实上，就在前几天，一位客户给我发了一张屏幕截图，他们使用的确实是 IE7...

【解决方案2】：

MrOBrian 对Ultimate CSS Gradient Generator 的建议让这一切变得轻而易举。这是我最终采用的解决方案，它是一种相对简单的 CSS 样式，由前面提到的 Gradient Generator 和 Cross-Browser CSS Gradient Button Guide 拼凑而成。

以下代码在应用于指定了 background-color CSS 属性的元素时添加了漂亮、流畅的按钮外观。这将允许我为所有按钮使用通用样式，使用 background-color 属性指定它们的颜色。

JSFiddle Demo

感谢您的所有意见和建议！

【讨论】：