如何创建像链接一样的HTML按钮？因此，单击该按钮可将用户重定向到页面。
我希望它是可访问的，并且在URL中使用最少的额外字符或参数。
当前回答
对于Nicolas的回答，以下内容对我有用，因为该回答没有type=“button”，因此它开始表现为提交类型。。。因为我已经有一个提交类型。这对我不起作用。。。现在，您可以向按钮或＜a＞添加一个类以获得所需的布局：
<a href="http://www.google.com/">
<button type="button">Click here</button>
</a>
其他回答
在<button></button>上使用<a></a>属性回答的人很有帮助。
但最近，我在<form></form>中使用链接时遇到了一个问题。
该按钮现在被视为提交按钮（HTML5）。我已经尝试了一种方法，并找到了这种方法。
创建一个CSS样式按钮，如下所示：
.btn-style {
border: solid 1px #0088cc;
border-radius: 6px;
moz-border-radius: 6px;
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
font-size: 18px;
color: #696869;
padding: 1px 17px;
background: #eeeeee;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(49%, #eeeeee), color-stop(72%, #cccccc), color-stop(100%, #eeeeee));
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=0);
}
或者在这里创建一个新的：CSS按钮生成器
然后用一个以您所创建的CSS样式命名的类标记创建链接：
<a href='link.php' class='btn-style'>Link</a>
这是一把小提琴：
JSFiddle公司
如果你需要的是它看起来像一个按钮，重点放在渐变图像上，你可以这样做：
<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>
创建一个充当链接的按钮是HTML设计者需要考虑的一项要求。最被接受的答案是使用表单中的按钮，不幸的是，有时只会在当前窗口中加载新链接-如果这是在电子邮件中，情况会很糟糕。
其他人提出JS、Bootstraps、CSS Styles等可能不可用或不允许。假设一个用例像电子邮件中的一个链接来确认它，并且你没有一个设计完整的基于html的电子邮件模板。您可以简单地使用链接，但添加一些内联样式，如下所示：
$htmlLink = 'https://stackoverflow.com/questions/2906582/';
"<a target='_blank' href='". $htmlLink ."' style='color: purple; font-size: 24px; font-weight: bold; border:2px purple solid; text-decoration: none;'>View This Answer</a>"
引号已经设置好，如果要在电子邮件标记中作为一行，可以在两端用点（.）连接。这只会使文本变大，周围有边框；不是很好，但保证不会像前面所说的那样加载页面。在解析文本和变量时假设Php。
我知道已经提交了很多答案，但似乎没有一个能真正解决问题。以下是我对解决方案的看法：
使用OP开头的<form method=“get”>方法。这非常有效，但有时会附加一个？到URL。这个是主要问题。此解决方案在不启用JavaScript的情况下工作。回退将添加？到URL的结尾。如果启用了JavaScript，那么您可以使用jQuery/JavaScript来处理以下链接，这样吗？不会最终附加到URL。对于极少数未启用JavaScript的用户，它将无缝地回退到＜form＞方法。JavaScript代码使用事件委托，因此您可以在＜form＞或＜button＞存在之前附加一个事件监听器。我在这个例子中使用jQuery，因为它既快速又简单，但也可以用“香草”JavaScript实现。JavaScript代码防止发生默认操作，然后遵循<form>action属性中给出的链接。
JSBin示例（代码段不能跟随链接）
//使用“link”类侦听文档中某个元素的任何单击$（document）.on（'click'，'.link'，函数（e）{//阻止默认操作（例如提交表单）e.预防违约（）；//获取表单中指定的URLvar url=e.target.parentElement.action；window.location=url；});<!DOCTYPE html><html><head><script src=“https://code.jquery.com/jquery-1.11.1.min.js“></script><meta charset=“utf-8”><title>表单按钮作为链接</title></head><body><!-- 将“action”设置为按钮要转到的URL--><form method=“get”action=“http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"><!-- 将类“link”添加到事件侦听器-->的按钮<button type=“submit”class=“link”role=“link”>链接</button></form></body></html>
这个问题似乎有三种解决方案（都有利弊）。
解决方案1：表单中的按钮。
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
但问题是，在某些版本的流行浏览器（如Chrome、Safari和Internet Explorer）中，它在URL末尾添加了问号字符。换言之，您的URL上面的代码最终将如下所示：
http://someserver/pages2?
有一种方法可以解决这个问题，但需要服务器端配置。使用Apache Mod_rewrite的一个示例是重定向所有带有拖尾的请求？到其相应的URL，而不使用？。下面是一个使用.htaccess的示例，但这里有一个完整的线程：
RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]
类似的配置可能因使用的Web服务器和堆栈而异。因此，总结一下这种方法：
赞成的意见：
这是一个真正的按钮，从语义上讲是有意义的。因为它是一个真实的按钮，所以它也会像真实的按钮一样（例如，当激活时按下空格键时，拖动行为和/或模仿单击）。不需要JavaScript，不需要复杂的样式。
欺骗：
尾随？在某些浏览器中看起来很难看。这可以通过黑客（在某些情况下）使用POST而不是GET来解决，但干净的方法是使用服务器端重定向。服务器端重定向的缺点是，由于304重定向，它将导致对这些链接的额外HTTP调用。添加额外的<form>元素当使用多种形式时，元素定位可能会很棘手，在处理响应式设计时会变得更糟。根据元素的顺序，使用此解决方案可能无法实现某些布局。如果设计受到这一挑战的影响，最终可能会影响可用性。
解决方案2：使用JavaScript。
您可以使用JavaScript触发onclick和其他事件，以使用按钮模拟链接的行为。下面的示例可以从HTML中改进和删除，但它只是为了说明这个想法：
<button onclick="window.location.href='/page2'">Continue</button>
赞成的意见：
简单（对于基本需求）并保持语义，而不需要额外的形式。因为它是一个真实的按钮，所以它也会像真实的按钮一样（例如，当激活时按下空格键时，拖动行为和/或模仿单击）。
欺骗：
需要JavaScript，这意味着不易访问。这对于基础（核心）元素（如链接）来说并不理想。
解决方案3：锚（链接）样式类似按钮。
将链接设置为按钮的样式相对容易，并且可以在不同的浏览器中提供类似的体验。Bootstrap可以做到这一点，但使用简单的样式也很容易实现。
赞成的意见：
简单（对于基本要求）和良好的跨浏览器支持。不需要<form>即可工作。不需要JavaScript来工作。
欺骗：
语义有点断裂，因为你需要一个像链接一样的按钮，而不是一个像按钮一样的链接。它不会再现解决方案#1的所有行为。它将不支持与按钮相同的行为。例如，链接在拖动时的反应不同。此外，如果没有额外的JavaScript代码，“空格键”链接触发器将无法工作。这将增加很多复杂性，因为浏览器在如何支持按钮上的按键事件方面并不一致。
结论
解决方案#1（表单中的按钮）对于用户来说似乎是最透明的，所需的工作最少。如果您的布局不受此选择的影响，并且服务器端的调整是可行的，那么对于可访问性是最高优先级的情况（例如，错误页面上的链接或错误消息），这是一个很好的选择。
如果JavaScript不是可访问性要求的障碍，那么解决方案#2（JavaScript）将优先于#1和#3。
如果出于某种原因，可访问性至关重要（JavaScript不是一个选项），但您的设计和/或服务器配置使您无法使用选项#1，那么解决方案#3（锚样式类似于按钮）是一个很好的替代方案，以最小的可用性影响解决此问题。
