最强大的纯 CSS 按钮解决方案？答案

【问题标题】：Most robust CSS-only button solution?最强大的纯 CSS 按钮解决方案？
【发布时间】：2010-09-16 17:04:04
【问题描述】：

什么是最好、最强大的 CSS 按钮定义？

理想情况下，我希望渐变、圆角图像和优雅降级到 IE8。如果按钮不使用任何图像，并且按钮水平缩放以适应其内容，那也很棒。

什么是最好的解决方案？

【问题讨论】：

你见过css-tricks.com/examples/ButtonMaker吗？
不错。它们在 IE8 中看起来还不错。没有渐变，没有圆角或其他什么，但它们至少看起来像按钮。不过我不知道……我想我还是更喜欢推拉门技术。高度的灵活性较低，显然是因为它使用图像，但您可以拥有非常精美的按钮 :)
@Adam，您的评论可以很好地回答这个问题（至少在这一刻，您的评论分数高于下面给出的任何答案：）

标签： html css button gradient

【解决方案1】：

使用http://css-tricks.com/examples/ButtonMaker的工具

【讨论】：

【解决方案2】：

可以在旧版本的 Internet Explorer 中使用渐变、box-shadow、border-radius、rgba 颜色等，使用 @ 987654321@。查看具有所有这些 CSS3 属性的 their demo。

现在，将 CSS3 PIE 与 cmets 中提到的 button maker 结合起来就完成了！

【讨论】：

是的，您还应该尝试在 IE6/7 中使用带有 10 个 CSS3 按钮的页面：D
+1。感谢您提供有关 PIE 的信息。至少现在我们可以在努力工作的同时吃点东西……:)

【解决方案3】：

非常喜欢 JQuery UI 按钮。演示是here

是的，他们确实使用了一些图像...但是这些图像对于 JQuery UI 的许多其他功能也是通用的，它为您的页面提供了一些令人惊叹的功能（并且更多的功能一直在出现）它确实可以优雅地降级，并且您可以通过另一个 JQuery 插件将其扩展到 IE 中的舍入。我最喜欢的部分是 ThemeRoller，它允许您使用支持 themeroller 的插件构建页面，然后随意设置样式或更改，即使使用浮动在网站上的工具。您可以轻松地为您的用户提供一种通过单击按钮来切换站点的整个主题的方法。此外，如果您不喜欢其中的内容，还有一个编辑器可以轻松制作您自己的主题。

至于渐变，您可以使用淡入淡出、淡入淡出、曲线淡入淡出、图案，然后使用这些变体以及更多颜色叠加和不透明度“构建自己的”选项。

设置按钮很简单：<button class="ui-state-default ui-corner-all" type="submit">Button</button>

【讨论】：

【解决方案4】：

仅使用 CSS 无法满足您的要求，因为渐变和角点仅从 CSS3 开始添加，即使现在它们仍不完全受支持。

现在实现渐变的最佳方法是使用实际图像，然后您可以放心，如果不是所有浏览器都支持它（如果您使用的是 .png 图像，IE6 可能会遇到问题，但有 CSS hacks 可以绕过它）。

可以通过两种不同的方式将圆角添加到网站：

第一种是通过图像，您可以将它们放置在元素的角上，以提供圆润的外观。我之前所说的关于 .png 图片的内容在这里仍然适用。
第二种方法是使用JavaScript。大多数框架都会在设计时考虑到 Web 2.0 特性的插件。我推荐 jQuery，因为它很容易实现。

在以上两种方法中，如果您想绝对确保用户可以看到曲线，则首选第一种，但是如果您不太担心他们禁用 JavaScript，我肯定会使用 jQuery，因为它是 100 次更容易使用。

【讨论】：

如果要留下详细的答案，至少语法、拼写等要正确
@FillipPeyton 在那里，我修好了。 ;]