css - 重置/标准化 <button> 使其像 <a> 一样

Question

如何制作 <button> 的样式元素类似于 <a>元素尽可能接近？

我不需要特定链接 text-decoration: underline; color: blue;等等 - 无论如何我正在重置那些。基本上，我想要 <button>在我申请类(class)之前就像纯文本一样。

背景:在 JavaScript 应用程序中，我将点击处理程序绑定(bind)到 <a>元素。那些<a>元素没有自然 href ，这会扰乱某些浏览器中的键盘可访问性。似乎替换了 <a>与 <button>会更好地反射(reflect)元素的意图。但是当我使用 <button> ，浏览器严重破坏了样式。如何阻止浏览器弄乱样式？

Answer 1

您可以重置您的按钮

像这样:

button, button:active, button:focus{
  border: 0;
  outline: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  background: none
}

<button>test button as a link</button>