最健壮的纯CSS按钮解决方案？

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

这是最好的解决方案是什么？

2010-09-16 Stefan Kendall

你见过http://css-tricks.com/examples/ButtonMaker/？ – Adam 2010-09-16 17:05:56

这实际上非常好。 – 2010-09-16 17:21:04

还不错。他们看起来在IE8中体面一半。没有渐变，没有圆角或什么不是，但他们至少看起来像按钮。但我不知道......我想我仍然更喜欢滑门技术。高度灵活性较差，显然是因为它使用图像，但你可以有真正的花式按钮:) – Strelok 2010-09-18 13:20:07

在JQuery用户界面按钮http://css-tricks.com/examples/ButtonMaker

来源

2010-09-20 16:03:19 Adam

没有办法做你所要求的只有CSS，因为渐变和角落只是作为CSS3添加的，甚至现在它们仍然没有完全支持。

现在实现渐变的最佳方式是使用实际图像，然后可以确定大多数（如果不是所有的话）浏览器都支持它（如果使用.png图像，IE6可能会有问题）但有CSS解决它）。

圆角可以被添加到该网站是在两种不同的方式：

首先是通过图像和你将这些在元素给人圆润的外观的角落。我之前说过的关于.png图片的内容在这里仍然适用。
第二种方法是使用JavaScript。大多数框架都会考虑使用Web 2.0功能设计的插件。我推荐jQuery，因为它很容易实现。

在上述两种方法中，第一种方法是首选，如果您想确保用户可以看到曲线，但是如果您不太关心禁用JavaScript，我肯定会使用jQuery作为它使用起来更容易100倍。

来源

2010-09-18 13:06:05 elitepraetorian

如果你要留下详细的答案，至少要有正确的语法，拼写等。 – 2013-10-04 22:05:34

@FillipPeyton在那里，我修好了。 ;] – WynandB 2013-12-02 23:49:58

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

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

来源

2010-09-18 13:15:13 Harmen

是的，你也应该尝试在IE6/7上使用带有10个CSS3-pied按钮的页面：D – Strelok 2010-09-18 13:18:09

+1。感谢有关PIE的信息。至少现在我们可以在努力工作的同时吃点东西...... :) – Gan 2010-09-18 15:03:50

巨大的风扇使用的工具。演示是here

是的，他们确实使用了一些图像......但图像也是JQuery UI的许多其他功能的共同之处，它为您的页面提供了一些令人惊叹的功能（并且更多功能始终如一）降级，并且可以通过另一个JQuery插件将其扩展到IE中。我最喜欢的部分是ThemeRoller，它允许你使用支持插件的插件来创建一个页面，然后使用风格或随意更改，即使使用漂浮在网站上的工具。您可以轻松地为用户提供一种方法，通过点击按钮切换网站的整个主题。另外，如果你不喜欢那里的内容，有一位编辑可以轻松制作自己的主题。对于渐变，您可以淡入淡出，淡入淡出，曲线淡入淡出，图案，然后“制作您自己的”选项，并选择不同的颜色叠加层和不透明度。

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

来源

2010-09-20 16:10:34 bpeterson76

最健壮的纯CSS按钮解决方案？

回答

相关问题