CSS3 按钮生成器

Avatar of Chris Coyier
Chris Coyier 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度！

拖动元素，选择颜色，为您的按钮创建漂亮的类……隆重推出 按钮生成器。


哇，那真是一个漂亮的按钮。

我之所以说“CSS3”，是因为这些按钮使用了渐变、阴影和圆角，这些特性极大地增强了它们的按钮感。在不支持这些属性的旧版浏览器中，回退方案是使用纯色背景、无阴影和方形角。这没什么大不了的。

我希望这一点非常明显，但要使用此按钮生成器，您只需调整设置直到获得一个好看的按钮，然后按下按钮，它就会为您提供 CSS 代码。您可以随意复制和粘贴。现在，您可以在 HTML 元素上使用类名“button”来使它们看起来像按钮。生成的 CSS 格式不是很好看。如果有人有关于如何改进格式的想法，请告诉我。

超级棒的赋能理念……

……关于按钮生成器预览是如何工作的。

使用 JavaScript 可以轻松地动态更改元素的 CSS。但是我们如何更改 :hover 状态呢？答案是我们无法真正做到，至少不是很容易。我们可以附加一个 mouseenter 事件，该事件将应用一些新的 CSS 来覆盖旧的 CSS，以及一个 mouseleave 事件来将其恢复原状。对于如此相对较小的事情来说，这需要大量的开销。如果我们也想要控制 :active 状态，情况会变得更加复杂。

此按钮生成器向您显示了您创建的按钮的实时工作版本，包括 :hover 和 :active 状态。它是无需将任何 JavaScript 事件附加到按钮本身来实现的。那么它是如何实现的呢？我使用了从 Doug Neiner 那里借鉴的技术，他在 jQConf 上（作为完全不同的应用程序的一小部分）展示了该技术。

好吧，好吧，我继续说。这个想法是将一个<style>元素附加到<head>中，该元素会覆盖现有的 CSS（文档内 CSS 会自动覆盖具有相同特异性值的相同选择器的链接 CSS）。然后，当某些内容发生更改时，您只需将整个样式标签删除并替换它。

附加新的样式

$("head").append("<style type='text/css'></style>");

文本变量，用于保存 CSS 代码。当选项发生更改时，请保持此文本最新。

var cssText = "";

使用 replaceWith() 函数删除现有的样式元素并应用新的样式元素

$("style").replaceWith("<style type='text/css'>" + cssText + "</style>");

删除部分很重要。最初，我尝试在样式元素上放置一个 ID，并在运行时替换其中的内容。它确实替换了内容，但这些更改并未反映在页面上。显然，为了强制浏览器使用新的 CSS 重新渲染，您必须将其删除并放回。

获取它，摇晃它

如果出于任何原因您想在本地运行它，我将提供该工具的源代码。或者更好的是，因为您想让它更酷。如果您这样做，请分享。

查看演示   下载文件

嘘！ 创建一个 DigitalOcean 账户并获得 200 美元的免费额度 用于基于云的托管和服务。

评论

  1. Michael Krapf
    评论永久链接#

    从头到尾都很棒的工作。我喜欢您提供的全部选项，以及您提供 CSS 的方式也很酷。

  2. Ant
    评论永久链接#

    一直想要这样的东西，手动输入矢量渐变太费时间了。

  3. Kent
    评论永久链接#

    哇，这太棒了。干得好！

  4. Scott
    评论永久链接#

    做得很好！

    我一时想不起来这是否可行，但您能否以某种方式利用 http://www.styleneat.com 的强大功能来格式化 CSS？也许在 CSS 显示中添加一个链接，该链接会将用户发送到 styleneat.com，并预先填充输入字段中的生成内容？

    如果我有机会，我会下载源代码看看是否可以解决一些问题。我不确定从外部来源连接到 styleneat 的难易程度，所以这可能有点儿徒劳，但谁知道呢？

  5. Rilwis
    评论永久链接#

    不错的项目。我认为如果 CSS 格式良好，更易于阅读。

    • Chris Coyier
      评论永久链接#

      我通常以单行格式编写我的 CSS，所以对我来说效果很好，但我同意，如果它使用换行符/空格来提高可读性，总体来说会更好。

    • Eddy
      评论永久链接#

      您说的单行是指每个规则一行，对吧？演示中所有内容都在一行。

  6. 网页设计资源
    评论永久链接#

    这太棒了。非常感谢。这正是我一直在寻找的。

  7. ben
    评论永久链接#

    网页 2.0 不行！

  8. Can Aydoğan
    评论永久链接#

    很棒的工具。谢谢……

  9. Devin Rajaram
    评论永久链接#

    这真的很酷！干得好，Chris

  10. Ben
    评论永久链接#

    非常性感，Chris :D

  11. Nipperkin
    评论永久链接#

    非常好！

    感谢您提供这个有用的（并且制作精良的！）工具。

  12. Sumeet Chawla
    评论永久链接#

    太棒了，Chris！！

  13. Theo
    评论永久链接#

    很棒的工作，一个非常酷的工具！

  14. Jerm
    评论永久链接#

    非常棒的工具，节省大量时间的想法^^。

    感谢 Chris。

  15. MoD
    评论永久链接#

    您不应该使用 !important。它会破坏“提交评论”按钮并使用户样式无效。

    • Chris Coyier
      评论永久链接#

      您是在谈论这个特定的评论表单吗？它哪里“被破坏”了？对我来说看起来还不错。

      不过，用户样式是一个有趣的点。它可能看起来“被破坏”了，因为您自己的用户样式以某种方式与它冲突？您不能在您的用户样式中使用 !important 来对抗我的样式吗？这就是用户样式的工作原理，您一直在对抗页面上的内容？或者您可以关闭我的样式并使用您自己的样式，从而使 !important 变得无关紧要？

      我在这些地方使用 !important 有我的理由。.button 样式是通用的，并且没有太多 CSS 特异性权重。但是，我想确保我的按钮完全按照我编写的那样显示，因此我在必要时使用 !important，以确保级联不会破坏它们。

    • Jordan Walker
      评论永久链接#

      说得很好！

  16. Jacob
    评论永久链接#

    消除了 Firebug 的乐趣 ;-)

    我不介意 CSS 是如何提供的。我通常也以单行格式编写。

    很棒的工具。当我忘记如何编写恼人的 webkit 渐变时，我一定会使用它。

    • Helge-Kristoffer Wang
      评论永久链接#

      将它分割成多行也不是很难:)

  17. geompak
    评论永久链接#

    Chris 又提供了一个很棒的想法。
    -..- 惊叹

  18. Federico Reinoso
    评论永久链接#

    嗨：我真的很喜欢这个按钮生成器，我将在我的某些项目中使用它。

    要添加的一件小事是阴影颜色选择器，因为“阴影不能是黑色”：D

    阴影可以是背景色的深色版本，或者使用活动背景色的深色版本。

    另外，如果CSS可以包含IE版本的渐变（类似于CSS3，拜托！），那将会很受欢迎；)

    • Greg
      评论永久链接#

      恰恰相反，阴影必须始终为黑色并具有不同的不透明度。一旦你开始改变阴影的颜色，它在底层元素的不同颜色下看起来就不会正确。

      通过使用部分不透明度的黑色，你将自动使每个底层颜色“变成该颜色的深色版本”。

      原因如下。假设你的按钮位于一个繁忙的图像之上，该图像碰巧主要包含红色，但也包含一些黄色和蓝色。由于它主要是绿色，因此你将阴影设置为“深绿色”。

      红色 + 一些半透明的深红色阴影 = 背景上阴影处为深红色。视觉上正确！

      黄色 + 一些半透明的深红色阴影 = 背景上阴影处为橙色。不正确。黄色的阴影应该像你所说的那样，是深黄色。

      蓝色 + 一些半透明的深红色阴影 = 背景上阴影处为紫色。也不正确。

      你可以看到我的意思。当你使用低不透明度的黑色时，下面的所有内容都会正确地变成其自身颜色的深色版本。

    • Greg
      评论永久链接#

      抱歉，“由于它主要是绿色，因此你将阴影设置为“深绿色””这句话中的绿色应该替换为红色。我最初的例子是绿色，后来意识到如果坚持使用原色会更容易解释。;) Chris，如果你愿意，可以将更改直接应用到原始评论中，并删除此评论。;-)

  19. Jeff
    评论永久链接#

    感谢提供如此棒的工具！我正逐渐摆脱使用IE的用户不得不忍受方形角等想法，但他们确实有其他选择；)

  20. Danial Keshani
    评论永久链接#

    你真是太棒了！我真的不知道该如何感谢你提供这个有用的工具以及你正在制作的所有其他东西……

  21. Matthieu Desjardins
    评论永久链接#

    如果你继续让我们的生活如此轻松，我们很快就要在你所有的项目中给你一定的百分比了！

    感谢你让网络变得更美好！

  22. euan mead
    评论永久链接#

    哇，Chris，这绝对太棒了，只有一件小事，我们可以有：active 和：hover 渐变吗。

    谢谢

  23. Markus Rene Kriest
    评论永久链接#

    这太性感了。

    我上次查看在线按钮制作工具大约是在5年前。我放弃了这个概念，因为它们是用Flash编写的——而且没有你的按钮一半性感。

    很棒的工作，谢谢！

  24. Anil
    评论永久链接#

    这太棒了，你做得太出色了，而且你提供的创建圆角按钮的所有选项都非常好。
    我最喜欢它。

  25. Jeroen
    评论永久链接#

    达阵，Chris！！我相信一旦CSS3标准化，这个工具就会非常受欢迎。

    一个问题：为什么Jquery .replaceWith()函数有时在Firebug中查看HTML源代码时会生成一堆额外的样式表？这是某种jquery错误还是firebug错误？:-)

  26. Web Design
    评论永久链接#

    干得好，这个技巧很不错。 :)

  27. Al
    评论永久链接#

    你真是个传奇！！这太棒了！为什么把它隐藏在css3-button-maker/example下——把它放在它自己的网站上……这就是它所需要的！:) ahahah 太棒了！

    • Max Black
      评论永久链接#

      我同意，这需要它自己的网站。不错的工作。

  28. Nelutu
    评论永久链接#

    谢谢，太棒了，你为我（和其他人）节省了很多工作时间！
    干杯！

  29. arnold
    评论永久链接#

    为什么所有属性都在一行上？

    这很好，非常有用，节省时间，希望会有更多这样的想法，嗯……表单会是一个不错的选择

  30. Catherine Azzarello
    评论永久链接#

    喜欢这个！非常感谢，Chris！

  31. Mike
    评论永久链接#

    太棒了，这将成为我一些Web 2.0项目中很棒的工具。

  32. Jens Kilgenstein
    评论永久链接#

    它非常简单，但完美无缺——感谢你的分享！

  33. matt
    评论永久链接#

    这在IE7中看起来很糟糕。根本没有背景颜色。

    喜欢这个概念。我只是希望我们可以让IE 6和7的用户最终升级。

    • bill
      评论永久链接#

      如果我们作为设计师和开发人员继续前进，用户也会继续前进。我们不能指望他们先采取行动。

    • Susan
      评论永久链接#

      即使我们为IE用户提供了一个平淡的替代方案，在大多数情况下也应该这样做。例如，我们的网站的大部分访问者来自大学、政府和大型公司。用户本身通常不允许使用非公司浏览器，并且许多用户仍然使用旧版本的IE，因为他们的组织正在使用只能与浏览器X配合使用的软件，并且升级成本很高。

  34. Sivaranjan
    评论永久链接#

    非常喜欢！但尚未在IE上测试。在Firefox和Safari中渲染效果很好！非常感谢！。
    我在我的CSS聚合器网站上添加了你的工具作为资源，希望你不介意。 :)

  35. Landon Miller
    评论永久链接#

    我添加了“快速复制”功能，以便可以轻松获取代码，而无需查看样式表。

    喜欢这个概念！

    可以在 http://cl.ly/1Ekb 查看

    • Landon Miller
      评论永久链接#

      或者格式化单击按钮时输入的cssText是另一种选择，但这需要额外的点击……

    • William Wood
      评论永久链接#

      一种更简单的获取输出多行的方法

      更改

      $("style").replaceWith("" + cssText + "");
$("#the-css").html(cssText);

      为

      $("style").replaceWith("" + cssText + "");
cssText = cssText.replace(/;/g,";").replace(/{/g,"{").replace(/}/g,"}");
$("#the-css").html(cssText);
    • Landon
      评论永久链接#

      我更喜欢你的方法！

  36. Usman Arshad
    评论永久链接#

    非常棒的工作，喜欢它 :)

  37. Ben
    评论永久链接#

    这很不错，但文本颜色对我来说不起作用……它反而改变了底部渐变颜色？

  38. xeonwell
    评论永久链接#

    感谢你提供这个很棒的工具。

  39. keshavsing solanki
    评论永久链接#

    对编码印象深刻..
    它非常有用。

    谢谢..

  40. Tutorial Lounge
    评论永久链接#

    非常有用，感谢分享。

  41. andrei
    评论永久链接#

    你能否详细介绍一下显示按钮CSS的框（你是如何制作的）？

  42. Nir
    评论永久链接#

    Chris，
    这是我在这里的第一个评论，所以请允许我感谢你在这里分享的所有内容。它确实已经帮助了我，并在很多事情上让我感到安心。

    对于这个具体问题，你有没有什么东西可以作为IE用户的后备方案？在我的国家，仍然超过75%的人使用它……（当然，很不幸）。

    谢谢。

  43. tpryor
    评论永久链接#

    不错，这让我想起了我在这里在线上发布的一个……
    http://dvia.com/buttonMaker

    =)

  44. Jeremy Carlson
    评论永久链接#

    尽管这很酷，但我仍然更喜欢自己编写CSS，这样我才能掌握我需要的技能。这是节省时间的东西，但往往会让我忘记在需要时如何真正做到这一点。不过我确实很喜欢它。

    这是否意味着我们现在将在所有地方看到这种风格的按钮？

  45. Dan Knight
    评论永久链接#

    非常棒。我在我网站备份主页的底部进行了测试，网址是 http://lowendmac.com/index.shtml

    在我的 OS X 10.4 和 10.5 Mac 上，在 Opera、Safari、iCab 和 Firefox 中看起来很棒。在 Camino 和 IE 5.2（最后一个 Mac 版本）中也表现良好。

  46. Dan Knight
    评论永久链接#

    更正：在 Camino 中也很好。需要刷新一下。

  47. Dave
    评论永久链接#

    太棒了，谢谢！我更喜欢 CSS 按钮而不是图片，而且很高兴有一个可靠的地方来生成这些按钮（尝试搜索“按钮生成器”并查看一些网站）。
    再次感谢！

  48. Sarah
    评论永久链接#

    棒极了！非常非常棒！

  49. William Wood
    评论永久链接#

    简单的多行输出

    $("style").replaceWith("" + cssText + "");
cssText = cssText.replace(/;/g,";").replace(/{/g,"{").replace(/}/g,"}");
$("#the-css").html(cssText);
  50. Jack Nycz
    评论永久链接#

    老实说，Chris，这是我几个月来见过的最简单但最棒的概念之一——干得好。

  51. Chilinaz
    评论永久链接#

    Chris，这真是太棒了！谢谢！

  52. Ron
    评论永久链接#

    谢谢！

  53. Tarot
    评论永久链接#

    哇，这太棒了，谢谢！

  54. Bert de Vries
    评论永久链接#

    关于 CSS 的格式...
    只需复制粘贴 CSS 到
    http://www.lonniebest.com/FormatCSS/
    你就可以完全掌控。

  55. Robotti
    评论永久链接#

    很棒的工具，但在 Opera 10.53 中滚动条不起作用。

  56. Jimmy
    评论永久链接#

    太酷了！！

  57. Scott Gallant
    评论永久链接#

    这是一个很棒的工具，但我认为它需要做一些工作才能向后兼容 IE7（至少）。

    Net Tuts 刚刚为一个 CSS3 按钮做了类似的教程，它在 IE6 和 IE7 中看起来都很好……但是，它没有渐变、没有圆角，也没有 @font-face。但至少它看起来有点像按钮。

    http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/

    查看演示。

  58. Abhishek
    评论永久链接#

    太酷了，Chris。虽然网上还有数百个其他按钮生成器，但这是我见过的最好的一个。

    你是我新的最爱。

  59. Matt
    评论永久链接#

    应该为 IE6-7 添加某种优雅降级。许多公司仍然不幸地被锁定在 IE6 上一段时间。

    • Bradley
      评论永久链接#

      一个非常简单的方法，只需指定一个背景颜色；)

  61. Deepak Kaletha
    评论永久链接#

    哇，这真是太棒了！
    感谢这个有用的、很棒的工具

  62. Shane
    评论永久链接#

    很棒的按钮，非常酷的工具！！
    干杯！！

  63. Lorna's Voice
    评论永久链接#

    获取信息——有点超出我的理解范围——但我将会搞懂的！

  64. Tiara
    评论永久链接#

    很棒的教程，但是 jQuery 使它有点令人困惑，但我确实设法使其工作。对于任何想要更轻松地制作按钮的人来说，还有几个生成器也值得一试，例如 http://www.generatecss.com 和 http://www.cssbutton.me

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。

© 2024 . All rights reserved.