制作一个 <button> 这是 HTML 中的链接

Question

基本上，我喜欢 <input type="submit"> 的样式，添加一点 CSS 时带有可点击按钮。但是，常规按钮不是这样的样式，如果没有一些主要的 CSS 或 JS，它们就没有这种可点击性，并且您必须使用图像。

我通过使用表单操作将提交按钮变成了链接，但这需要我为每个按钮制作一个新表单。我怎样才能找到一个快乐的媒介？使用多种形式会导致我的样式出现问题，除非我找到另一种方法来制作按钮，这些按钮是 HTML 中的链接，这些按钮具有使它们具有按下状态的默认样式（我不是说浏览器默认设置）。

有任何想法吗？

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

Answer 1

<a href="#"><button>Link Text</button></a>

您要求一个看起来像按钮的链接，所以使用一个链接和一个按钮 :-) 这将保留默认的浏览器按钮样式。该按钮本身不执行任何操作，但单击它会激活其父链接。

演示：

 <a href="http://stackoverflow.com"><button>Link Text</button></a>

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

Answer 2

重要提示： <button> 永远不应该是 <a> 的后代。

在 https://validator.w3.org 之类的任何 html 验证器中尝试 <a href="http://stackoverflow.com"><button>Link Text</button></a> ，你会得到一个错误。如果您 不 使用按钮，那么使用按钮真的毫无意义。只需使用 css 将 <a> 样式设置为看起来像一个按钮。如果您使用的是像 Bootstrap 这样的框架，则可以应用按钮样式 btn , btn-primary 等。

jsfiddle： 按钮样式的链接

 .btnStack {
  font-family: Oswald;
  background-color: orange;
  color: #000;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
a.btnStack:hover {
  background-color: #000;
  color: #fff;
}

 <link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<a href="http://stackoverflow.com" class="btnStack">stack<b>overflow</b>.com</a>

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