尝试使用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; }

如果你不介意使用twitter bootstrap，我建议你简单地使用link类。

<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css” integrity=“sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB” crossorigin=“anonymous”> <button type=“button” class=“btn btn-link”>Link</button>

你可以使用简单的css实现这一点，如下面的例子所示

button { overflow: visible; width: auto; } button.link { font-family: "Verdana" sans-serif; font-size: 1em; text-align: left; color: blue; background: none; margin: 0; padding: 0; border: none; cursor: pointer; -moz-user-select: text; /* override all your button styles here if there are any others */ } button.link span { text-decoration: underline; } button.link:hover span, button.link:focus span { color: black; } <button type="submit" class="link"><span>Button as Link</span></button>

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

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

 button {
  text-decoration: underline;
  cursor: pointer;
  }

 <button onClick="javascript:window.location.href='link'">Domain</button>