CSS窗体按钮

我正在寻找一种在窗体上实现CSS中可重用按钮的好方法。要求： - 独立的图像和文字（文字在许多语言） - 翻转效果 - 播放精美的跨浏览器 - 没有使用Javascript（如果可能） - 圆角CSS窗体按钮

最新最好的方式做到这一点？多年前，我使用滑动门技术，但现在看起来已经过时了。你会使用旧版浏览器的回退CSS3吗？有没有特别好的想法？

来源

2011-06-10 Alex

我会为此使用css精灵。你可以在这里找到他们： http://css-tricks.com/css-sprites/

这基本上是一种使一个大型图像，具有所有按钮状态（正常，悬停，选中）的方法。好处是它是一个http请求，并且在第一次悬停时不会看到闪烁。如果您使用此路线，则CSS背景属性将为图像。然后，您可以使用文本对齐和行高来将要放置在图像上的文本居中。

来源

2011-06-10 15:25:25 jray0039

-1

一个精灵是一个不错的选择，我时常使用它们。

就我个人而言，我不介意我的网站在所有浏览器中都不相同，并且我去了CSS类路线。我记住各种浏览器支持和不支持的内容，如果某个元素需要某种特定的方式，我会仔细检查W3Schools的兼容性。

让我使用CSS/CSS3类的主要好处是，如果某件事情发生变化，它可以通过单个文件中的文本快速完成，如果需要的话，我可以使用拨号从10年前的计算机快速更改连接（如果它们仍然存在）并且没有成像软件。精灵的优势在于它们在所有浏览器中都受支持，并且它们看起来完全相同（或多或少）。 SpriteMe是我听说过的一个小书签，如果你决定沿着这条路走下去，它将帮助小精灵。

我认为这是一个你更喜欢的事情......这些问题是我在做出这种决定时要问自己的：它会多久改变一次？大或小的变化？如果它改变了，它会是一个完整的重新设计工作吗？你知道什么？你愿意花多少时间学习你可能不知道的东西？你对这个项目的直言是什么？

我希望这可以帮助你。

来源

2011-06-10 15:42:14 Ryan

Jquery UI按钮非常棒。它们经过全面测试，完全符合标准，而且看起来非常棒。通过一行代码，您可以在任何时间都有完整的按钮。这里的东西 - 他们可以在没有jQuery的（去图）执行

First, the tut

因此，标准的方法是用ID来建立一个元素（A，按钮，输入），把它作为一个按钮在jquery中是这样的：$('#element').button()

但是，如果你按教程显示的方式来做，你只需要添加一些类到一个元素来获得类似的效果。因此，要做成一个按钮的标签的，这纯粹是

<a href="" class="ui-state-default ui-corner-all">Button</a>

在这个例子中，没有必要设置与jQuery的按钮声明按钮......你的风格做，只。通过灵活地设计这么多不同类型的元素，它打开了大量的门。

您将不得不加载Jquery UI css，它提供了ThemeRoller的附加好处，它可以通过简单的文件更改来设置页面上的元素。这是一个很好的方式来“主题”一个网站，必须赶快改变品牌，这使得我公司推出的定制主题应用程序非常有利可图。

来源

2011-06-10 15:48:05 bpeterson76

+1，这很有意义。 – thirtydot 2011-06-10 16:02:18

我通过tut阅读，它让我完全困惑，我必须使用jQuery UI CSS样式吗？另外我需要加载jQuery UI？ – Alex 2011-06-15 01:45:11

亚历克斯，是的，你将不得不使用JQuery UI风格。下载适合你的页面的Jquery UI。打开zip文件，只带上CSS文件夹。您必须将css文件包含在您要使用按钮的页面的CSS文件夹中。然后，你想添加样式的任何元素都应该添加上面的类。另外，你可以去所有的JQuery，并用我描述的第一种方法调用按钮，这会增加翻转样式。起初它有点强烈，但可能性非常惊人。 – bpeterson76 2011-06-15 03:15:44

这个库，Nifty Corners Cubed使用Javascript，但是是一个相当干净的方式来圆形div标签链接等等。很难找到一个可重用的解决方案，而不使用滑动门派生技术。否则，你会坚持制作无法修复的按钮，以适应你的尺寸。

来源

2011-06-10 16:08:06 pat8719

你也可以看看PIE http://css3pie.com/

来源

2011-06-10 17:12:50

回答

相关问题