如何创建一个类似于链接的 HTML 按钮？

Question

如何创建一个类似于链接的 HTML 按钮？因此，单击按钮会将用户重定向到页面。

我希望它可以访问，并且在 URL 中使用最少的额外字符或参数。

原文由 Andrew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML

普通的 HTML 方法是将其放在 <form> 中，您在 action 属性中指定所需的目标 URL。

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

如有必要，请在表单上设置 CSS display: inline; 以使其与周围的文本保持一致。除了上面示例中的 <input type="submit"> ，您还可以使用 <button type="submit"> 。唯一的区别是 <button> 元素允许子元素。

您会直观地期望能够使用 <button href="https://google.com"> 类似于 <a> 元素，但不幸的是不，根据 HTML 规范，此属性不存在。

CSS

如果允许使用 CSS，只需使用 <a> 您可以使用 appearance 属性（ 仅 Internet Explorer 不支持它）将 其设置为看起来像一个按钮。

 a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

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

或者从众多 CSS 库中选择一个，例如 Bootstrap 。

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

JavaScript

如果允许 JavaScript，请设置 window.location.href 。

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

除了上面示例中的 <input type="button"> ，您还可以使用 <button> 。唯一的区别是 <button> 元素允许子元素。

原文由 BalusC 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

 <button onclick="location.href='http://www.example.com'" type="button">
         www.example.com</button>

请注意， type="button" 属性很重要，因为 它的缺失值默认为提交按钮状态。

原文由 Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议