最强大的CSS-only按钮解决方案？

Question

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

理想情况下，我喜欢渐变，圆润的图像，以及优雅的降级到IE8。如果按钮没有使用任何图像，并且按钮水平缩放以适合其内容，也会很棒。

最佳解决方案是什么？

Answer 1

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

上的工具

Answer 2

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

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

Answer 3

JQuery UI按钮的巨大粉丝。演示是here

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

至于渐变，你可以淡化，淡化，弯曲渐变，图案，然后“建立你自己的”选项，包括那些以及更多的颜色叠加和不透明度。

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

Answer 4

没有办法只用CSS来解决问题，因为渐变和角落只是从CSS3开始添加，现在它们仍然没有完全支持。

现在实现渐变的最佳方法是使用实​​际图像，然后可以确保大多数（如果不是所有）浏览器都支持它（如果你使用.png图像，IE6可能会有问题但是有CSS黑客可以绕过它。）

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

• 第一个是通过图像，你可以将它们放在元素的角落，给出圆润的外观。我之前所说过的.png图片仍然适用于此。
• 第二种方法是使用JavaScript。大多数框架都会考虑使用Web 2.0功能而设计的插件。我推荐使用jQuery，因为它很容易实现。

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