如何解决我可以用输入按钮替换<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设计和使用实际按钮的外观。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。