尝试使用CSS伪类:focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

编辑链接和onclick事件使用(你不应该使用内联javascript事件处理程序，但为了简单起见，我将在这里使用它们):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

用这个。Href甚至可以在函数中访问链接的目标。返回false只会阻止浏览器在单击该链接时跟踪该链接。

如果javascript被禁用，链接将像正常链接一样工作，只需加载一些/page.php -如果你想让你的链接在js被禁用时失效，请使用href="#"

尝试使用CSS伪类:focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

编辑链接和onclick事件使用(你不应该使用内联javascript事件处理程序，但为了简单起见，我将在这里使用它们):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

用这个。Href甚至可以在函数中访问链接的目标。返回false只会阻止浏览器在单击该链接时跟踪该链接。

如果javascript被禁用，链接将像正常链接一样工作，只需加载一些/page.php -如果你想让你的链接在js被禁用时失效，请使用href="#"

您不能在整个浏览器中可靠地将按钮样式设置为链接。我试过了，但在某些浏览器中总是有一些奇怪的填充、空白或字体问题。要么让按钮看起来像一个按钮，要么在链接上使用onClick和preventDefault。

按钮{ 背景:没有!重要; 边界:没有; 填充:0 !重要; / *可选* / 字体:arial, sans-serif; /*输入有OS特定的字体-family*/ 颜色:# 069; 文字修饰:下划线; 光标:指针; ｝ <button>你的按钮看起来像一个链接

接受答案的代码适用于大多数情况，但要获得一个真正像链接一样工作的按钮，您需要更多的代码。在Firefox (Mozilla)上获得正确的聚焦按钮样式尤其棘手。

下面的CSS确保锚点和按钮在所有常用浏览器上具有相同的CSS属性和行为:

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

上面的例子只修改按钮元素以提高可读性，但它也可以很容易地扩展到修改input[type="button"]、input[type="submit"]和input[type="reset"]元素。如果你只想让某些按钮看起来像锚，你也可以使用一个类。

查看这个JSFiddle的现场演示。

还请注意，这将默认锚的样式应用到按钮(例如蓝色文本颜色)。因此，如果你想改变文本颜色或锚点和按钮的其他任何东西，你应该在上面的CSS之后这样做。

这个答案中的原始代码(见代码片段)完全不同且不完整。

/* Obsolete code! Please use the code of the updated answer. */ input[type="button"], input[type="button"]:focus, input[type="button"]:active, button, button:focus, button:active { /* Remove all decorations to look like normal text */ background: none; border: none; display: inline; font: inherit; margin: 0; padding: 0; outline: none; outline-offset: 0; /* Additional styles to look like a link */ color: blue; cursor: pointer; text-decoration: underline; } /* Remove extra space inside buttons in Firefox */ input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { border: none; padding: 0; }

我认为这很容易做到，只需要几行。这是我的解决方案

.buttonToLink { 背景:无; 边界:没有; 颜色:红色 ｝ .buttonToLink:{徘徊 背景:无; 文字修饰:下划线; ｝ <button class="buttonToLink">一个简单的链接按钮</button>