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

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

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

4回答