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

Question

我需要使按钮看起来像使用CSS的链接。所做的更改已经完成，但是当我单击它时，它显示的效果就像按按钮一样。任何想法如何删除它，以便即使单击该按钮也可以用作链接？

Answer 1

可接受的答案的代码在大多数情况下都适用，但是要获得真正像链接的行为的按钮，您需要更多的代码。在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;

}