我可以用输入按钮替换<a>链接吗？

问题描述

| 我有带有链接的表单，我想像按钮一样给它们设置样式。我尝试了许多不同的样式，但似乎没有一个看起来像普通的输入按钮一样好。 有什么方法可以将我替换为按钮吗？我需要放在里面吗？另外，如果有办法，搜索引擎将能够跟随该链接？     

解决方法

您可以使用特定的按钮属性：

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

演示     ,

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

这将起作用，并为您提供一个“正常”输入按钮。搜索引擎还应该能够解析该链接，因为它是一个\“ normal \”超链接，其中通常的链接文本由按钮替换。     ,大多数搜索引擎不能遵循

<button>

或

<input>

元素。 我建议您将其保留为链接（

<a>

元素），仅将其样式设置为按钮即可。     ,尝试以下CSS：

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

我建议您按照自己的想法来设置元素的样式，但这应该可以工作，不确定浏览器的兼容性。否则，您可以仅用一个按钮创建一个表单，并将URL设置为action参数。     ,要对链接进行样式设置，可以使用CSS 3圆角和/或背景图像使它看起来像一个按钮。问题出在哪里？ 您也可以自然使用输入按钮作为链接。但是我更喜欢标签解决方案，因为它在语义上更接近于您要表达的内容。无论如何，按钮看起来像这样：

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

    ,在这里，您有一些我之前创建的CSS3按钮。 http://jsfiddle.net/seler/SzAM3/embedded/result/     ,如果您是在设计按钮之后，为什么不尝试使用图像而不是输入按钮呢？

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

这就是我在程序中经常使用的:)，您可以使用Adobe Photoshop设计和使用实际按钮的外观。