如何使按钮看起来像一个链接？

接受答案的代码适用于大多数情况,但要获得一个真正像链接一样的按钮,您需要更多代码.在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;
  }
}

上面的示例仅修改button元素以提高可读性,但也可以轻松扩展为修改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;
}