如何创建像链接一样的HTML按钮？因此，单击该按钮可将用户重定向到页面。
我希望它是可访问的，并且在URL中使用最少的额外字符或参数。
当前回答
如果您使用的是SSL证书：
<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>
其他回答
随着其他一些人的添加，您可以使用一个简单的CSS类，不使用PHP，不使用jQuery代码，只使用简单的HTML和CSS。
创建一个CSS类并将其添加到锚点中。代码如下。
.button-link {
height:60px;
padding: 10px 15px;
background: #4479BA;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
<HTML>
<a class="button-link" href="http://www.go-some-where.com"
target="_blank">Press Here to Go</a>
就是这样。这很容易做到，让你随心所欲地发挥创造力。您可以控制颜色、大小、形状（半径）等。有关详细信息，请参阅我在网站上找到的。
这个问题似乎有三种解决方案（都有利弊）。
解决方案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（锚样式类似于按钮）是一个很好的替代方案，以最小的可用性影响解决此问题。
如果您在基本HTML锚标记中查找的是按钮的视觉外观，那么您可以使用Twitter Bootstrap框架将以下任何常见HTML类型的链接/按钮格式化为按钮。请注意框架版本2、3或4之间的视觉差异：
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
引导（v4）示例外观：
引导（v3）示例外观：
引导（v2）示例外观：
您还可以将buttons类型属性设置为“button”（它使其不提交表单），然后将其嵌套在链接中（使其重定向用户）。
这样，如果需要，您可以在同一表单中有另一个按钮来提交表单。我还认为，在大多数情况下，这比将表单方法和动作设置为链接更可取（除非我猜是搜索表单…）
例子：
<form method=“POST”action=“/SomePath”><input type=“text”name=“somefield”/><a href=“www.target.com”><button type=“button”>转到目标</按钮></a><button type=“submit”>提交表单</button></form>
这样，第一个按钮重定向用户，而第二个按钮提交表单。
小心确保按钮不会触发任何动作，否则会导致冲突。同样，正如Arius所指出的，您应该意识到，出于上述原因，根据标准，严格来说，这并不是有效的HTML。不过，它在Firefox和Chrome中确实可以正常工作，但我还没有在Internet Explorer中测试过它。
如果您想避免使用表单或输入，并且您正在寻找一个看起来像按钮的链接，那么可以使用div包装器、锚点和h1标记创建好看的按钮链接。您可能希望这样做，以便您可以在页面周围自由放置链接按钮。这对于水平居中的按钮和在其中具有垂直居中的文本特别有用。以下是操作方法：
按钮将由三个嵌套部分组成：div包装器、锚点和h1，如下所示：
.link按钮包装{宽度：200px；高度：40px；方框阴影：插入0px 1px 0px 0px#ffffff；边界半径：4px；背景色：#097BC0；方框阴影：0px 2px 4px灰色；显示：块；边框：1px实心#094BC0；}.link按钮包装器>a{显示：内联表；光标：指针；文本装饰：无；高度：100%；宽度：100%；}.link按钮包装器>a>h1{边距：0自动；显示：表格单元格；垂直对齐：中间；颜色：#f7f8f8；字体大小：18px；字体系列：cabinregular；文本对齐：居中；}<div class=“link button wrapper”><a href=“your/link/此处”><h1>按钮</h1></a></div>
这里有一个jsFiddle，可以查看它并玩它。
此设置的优点：1.使div包装显示：块易于居中（使用margin:0auto）和定位（而＜a＞是内联的，更难定位，不可能居中）。
您可以只制作＜a＞显示：块，移动它，并将其设置为按钮样式，但随后垂直对齐其中的文本会变得困难。这允许您创建＜a＞display：inline表格和＜h1＞display：table单元格，这允许您在＜h1’上使用垂直对齐：middle并垂直居中（这在按钮上总是很好的）。是的，你可以使用填充，但如果你想让你的按钮动态调整大小，那就不那么干净了。有时，当您在div中嵌入＜a＞时，只有文本是可单击的，这种设置使整个按钮都可单击。如果您只是想移动到另一页，则不必处理表单。表格是用来输入信息的，应该为此保留。允许您干净地将按钮样式和文本样式彼此分离（拉伸优势？当然，但CSS可能看起来很难看，所以分解它很好）。
它确实让我的生活变得更轻松，为可变大小的屏幕设计移动网站。
