最强大的纯 CSS 按钮解决方案？
最好、最强大的 CSS 按钮定义是什么？
理想情况下，我想要渐变、圆形图像和优雅降级到 IE8。如果按钮不使用任何图像，并且按钮水平缩放以适应其内容，那就太好了。
对此最好的解决方案是什么？
What's the best, most robust CSS-button definition?
Ideally, I'd like gradients, rounded images, and graceful degradation down to IE8. It would also be great if the buttons didn't use any images, and the buttons scaled horizontally to fit their content.
What's the best solution to this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
使用 http://css-tricks.com/examples/ButtonMaker 中的工具
Use the tools at http://css-tricks.com/examples/ButtonMaker
可以使用渐变、
box-shadow、border-radius、rgba> 旧版本 Internet Explorer 中的颜色等，使用 CSS3 PIE。查看他们的演示以及所有这些 CSS3 属性。现在，将CSS3 PIE与按钮制作器结合起来评论，你就完成了！
It is possible to use gradients,
box-shadow,border-radius,rgbacolour et cetera in older versions of Internet Explorer, using CSS3 PIE. Look at their demo with all these CSS3 properties.Now, combine CSS3 PIE with the button maker mentioned in the comments and you're done!
JQuery UI 按钮的超级粉丝。演示在这里 是
的，他们确实使用了一些图像......但图像也很常见JQuery UI 的许多其他功能，它为您的页面提供了一些令人惊叹的功能（并且不断有更多功能）它确实会优雅地降级，并且您可以通过另一个 JQuery 插件将其扩展到 IE 中。我最喜欢的部分是 ThemeRoller，它允许您使用支持 themeroller 的插件构建页面，然后随意设置样式或更改，甚至可以使用浮动在网站上的工具。您可以轻松地为用户提供一种通过单击按钮来切换网站整个主题的方法。另外，如果您不喜欢其中的内容，还有一个编辑器可以轻松制作您自己的主题。
至于渐变，您可以选择淡入淡出、淡入淡出、曲线淡入淡出、图案，然后使用这些选项的变体以及更多颜色叠加和不透明度来“构建您自己的”选项。
设置按钮非常简单：
Huge fan of JQuery UI buttons. Demo is here
Yes, they do use some images...but the images are also common to the many other features of JQuery UI, which offers your page some amazing features (and more coming all the time) It does gracefully degrade, and you can extend it to round in IE via another JQuery plugin. My favorite part is ThemeRoller, which allows you to build a page using themeroller capable plugins, then style or change at will, even with a tool that floats over the site. You could easily include a way for your user to switch the entire theme of the site with a button click. Plus, there's an editor to easily make your own themes if you don't like what's there.
As for gradients, you have fade up, fade down, curved fade, patterns, and then "build your own" options with variations of those and more plus color overlays and opacities.
Setting up a button is as easy as:
<button class="ui-state-default ui-corner-all" type="submit">Button</button>仅使用 CSS 无法完成您所要求的操作，因为渐变和角点仅在 CSS3 中添加，即使现在它们仍然没有得到完全支持。
现在实现渐变的最佳方法是使用实际图像，然后您可以放心，大多数（如果不是所有）浏览器都会支持它（如果您使用 .png 图像，IE6 可能会出现问题，但有 CSS黑客来绕过它）。
圆角可以通过两种不同的方式添加到网站中：
在上述两种方法中，如果您想绝对确保用户可以看到曲线，则首选第一种方法，但是如果您不太担心他们禁用 JavaScript，我肯定会使用 jQuery，因为它使用起来方便 100 倍。
There is no way to do what you're asking with CSS only, as gradients and corners were only added as of CSS3 and even now they are still not fully supported.
The best way to achieve gradients now is to use an actual image, you can then be assured that most if not all browsers will support it (if you're using a .png image, IE6 may have an issue with it but there are CSS hacks to get around it).
Rounded corners can be added to the site in two different ways:
Out of the above two methods the first one is preferred if you want to make absolutely sure that the users can see curves, however if you aren't too concerned about them having JavaScript disabled I would definitely use jQuery as it's 100 times easier to use.