如何创建一个表现得像链接的HTML按钮

技术背景

在前端开发中，有时我们需要创建一个外观是按钮，但点击后能像链接一样跳转到指定页面的元素。这在提升用户交互体验、实现特定功能布局等方面非常有用。下面将介绍几种实现这种效果的方法。

实现步骤

HTML方式

将按钮放在 <form> 标签中，并在 action 属性里指定目标URL。

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

若需要，可以为表单设置CSS display: inline;，使它与周围文本保持在同一行。也可以用 <button type="submit"> 替代 <input type="submit">，区别在于 <button> 元素允许包含子元素。

CSS方式

使用 <a> 标签，并通过CSS将其样式设置为按钮的样子。

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    padding: 1px 6px;
    border: 1px outset buttonborder;
    border-radius: 3px;
    color: buttontext;
    background-color: buttonface;
    text-decoration: none;
}

也可以使用一些CSS库，如Bootstrap：

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript方式

通过设置 window.location.href 来实现跳转。

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

同样，也可以用 <button> 替代 <input type="button">。

核心代码

HTML表单方式

<form action="https://google.com">
    <button type="submit">Go to Google</button>
</form>

CSS样式化链接方式

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    padding: 1px 6px;
    border: 1px outset buttonborder;
    border-radius: 3px;
    color: buttontext;
    background-color: buttonface;
    text-decoration: none;
}

JavaScript跳转方式

<button onclick="location.href='https://google.com'">Go to Google</button>

最佳实践

• 优先考虑HTML表单方式：当对可访问性要求较高，且服务器端可以处理URL末尾可能出现的 ? 时，使用HTML表单方式。这种方式语义明确，无需JavaScript和复杂样式。
• 使用JavaScript方式：如果JavaScript不是可访问性的阻碍，JavaScript方式是不错的选择。它简单且无需额外的表单元素。
• 采用CSS样式化链接方式：当可访问性至关重要（不能使用JavaScript），且设计或服务器配置不允许使用表单方式时，CSS样式化链接方式是很好的替代方案。

常见问题

HTML表单方式

在某些浏览器（如Chrome、Safari和Internet Explorer）中，使用表单方式可能会在URL末尾添加一个问号 ?。可以通过服务器端配置（如Apache Mod_rewrite）来重定向这些请求，去除末尾的 ?。

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

JavaScript方式

该方式依赖JavaScript，对于禁用JavaScript的用户来说，按钮将无法正常工作，可访问性较低。

CSS样式化链接方式

语义上不太准确，因为实际上是将链接样式设置为按钮，而不是真正的按钮表现得像链接。并且它无法完全重现真实按钮的所有行为，如拖动和按键触发等，可能需要额外的JavaScript代码来实现。