我可以替换<a> link with an input button?</a>

Question

我有带链接的表单，我想像按钮一样设置它们。我一直在尝试许多不同的风格，但似乎没有一个像普通的输入按钮一样好。

有没有办法可以用按钮取代？我需要把里面一个？此外，如果有一种方法，那么搜索引擎是否能够跟踪链接？

Answer 1

<a href="http://www.stackoverflow.com">
    <input type="button" name="so_link" value="Click me!">
</a>

这将起作用并为您提供“正常”输入按钮。搜索引擎也应该能够解析链接，因为它是一个“普通”超链接，通常的链接文本被一个按钮取代。

Answer 2

大多数搜索引擎都无法关注<button>或<input>元素。

我建议你将它们保存为链接（<a>元素），只需将它们设置为按钮。

Answer 3

尝试以下CSS：

-webkit-appearance: button;
-moz-appearance: button;
appearance: button;

我建议您自己设想元素，但这应该有效，不确定浏览器的兼容性。否则，您只能使用按钮创建表单，并将URL设置为操作参数。

Answer 4

您可以使用特定的 button 属性：

<a href="http://www.stackoverflow.com" style="text-decoration:none">
      <button  label="Press Me" name="so_link">Press me</button>
</a>

DEMO

Answer 5

要设置链接样式，您可以使用CSS 3圆角和/或背景图像使其看起来像一个按钮。问题在哪里？

您也可以自然地使用输入按钮作为链接。但我更喜欢标签解决方案，因为它在语义上更接近你要表达的内容。无论如何，一个按钮看起来像这样：

<input type="button" onclick ="window.location.href('http://foo.com')" value="Click me!" />

Answer 6

如果您在设计按钮后，为什么不尝试使用图像而不是输入按钮呢？

<a href="http://www.stackoverflow.com"><img src="button.jpg" alt="button function" /></a>

这是我经常在我的程序中使用的:)你可以使用adobe photoshop设计和玩真实按钮的外观。

Answer 7

这里有我很久以前创建的不错的CSS3按钮。 http://jsfiddle.net/seler/SzAM3/embedded/result/