Question

我想在页面上添加一个“花哨”按钮。我看到两种可能性：

以图片为背景的a元素，并为点击事件添加javascript函数。

或

一个img元素，并为点击事件添加一个javascript函数。

你有什么看法？哪一个是更好的方法，为什么？

谢谢！

Answer 1

其他选项包括：

使用背景图片设计为看起来像按钮的链接
使用背景图片设置样式但没有边框的Button元素。
带有提交类型或按钮的输入元素，背景图片没有边框。

我发现该按钮元素效果最好，特别是如果你想要翻转悬停效果。

jQuery UI有一个按钮插件，可以将任何类型的交互元素设置为花哨的按钮。

Answer 2

只要有可能，UI元素应定义为CSS背景。它们不是网站内容的一部分，因此它们实际上不需要被搜索引擎索引。

从语义上讲，A - 标记意味着一个链接，因此该事件应该连接到A - 标记，而不是图像。

Answer 3

这取决于你想要做什么。

在我的项目中，我们有一个表单，我们想要使用按钮而不是javascript提交，所以我们要插入一个按钮元素。

<button type="submit">Sign Out</button>

然后你可以使用CSS设置按钮的样式。

除此之外，我们将图像用于非表单按钮，javascript用于它们背后的功能。

Answer 4

第一个。你有更多选择来设计它，它也更容易“主题化”它。使用CSS成像“黑暗主题”和“浅色主题”，您可以轻松保持相同的HTML，但按钮的样式和图像完全不同。在某些浏览器中，图像不是必需的;您可以使用纯CSS轻松创建按钮。

Answer 5

不确定“花哨”按钮的含义，但首先要了解您可以使用CSS做什么，例如在http://hellohappy.org/css3-buttons/或http://twitter.github.com/bootstrap/base-css.html#buttons查看。

如果你想要比这更漂亮的东西，你应该在HTML中定义一个链接，使用和锚标签，因为它在语义上是正确的，并将它的背景设置为带有CSS的图像。我没有看到任何使用Javascript进行点击事件的理由，只要您只想向其他页面发出A GET请求即可。

Answer 6

从语义上讲，<button>和<input type="button|submit|reset" />元素是页面中交互元素的正确选择。

如果你只是像那样设置的链接，那么继续使用<a>元素，但是定义一些样式并使用类，例如{{1 }}

非常any element can be made into a button，如果使用正确的属性，它将保持语义。

以下语义相同，但<a class="button">需要JS支持：

<img>

如果你的装饰图片只是一个不影响内容的装饰图片，你可以使用一个用CSS设置样式的 <img src="some/image.jpg" alt="Continue" role="button" tabindex="0" /> <input type="image" src="some/image.jpg" alt="Continue" />或span：

div

Answer 7

我很确定你可以用普通的CSS获得这种效果，除非你想调用某种类型的函数，否则不需要JS，并且要按下按钮就不需要JS函数。

你可以简单地使用CSS动作（不确定它们是以这种方式命名的），如活动，悬停，焦点等......

这是一个例子：

http://jsfiddle.net/RQucV/2/

首先是背景为红色，点击时变为蓝色，访问时变为紫色。这是可能的，因为我使用了具有这些属性的'a'标签。

我只更改了背景颜色，但您也可以更改许多其他元素，例如字体，背景图像，边距，边框，您可以为其命名。

我觉得因为JS杂乱而使用纯CSS更干净。如果你想稍后添加更多的脚本，当浏览器有太多的脚本要做时，就会发生一些不好的事情。此外，解析CSS实际上可能比JS更快。

如果你使用纯CSS，那么只是另一个提示：并非所有浏览器都能同样处理CSS，我强烈建议在样式表中添加“reset.css”，以使其在你使用的每个浏览器中沿着相同的方向播放。 / p> 希望它有所帮助！

如何制作按钮更好？

7 个答案: