如何让按钮看起来像一个链接？
我需要让按钮看起来像使用CSS的链接。 所做的更改已完成，但是当我点击它时，它会显示为按钮状态。 任何想法如何删除，以便该按钮作为一个链接，即使点击时工作？
HTML
<button>your button that looks like a link</button>
CSS
button {
background:none!important;
color:inherit;
border:none;
padding:0!important;
font: inherit;
/*border is optional*/
border-bottom:1px solid #444;
cursor: pointer;
}
查看演示（在JSfiddle上）
被接受的答案的代码适用于大多数情况，但要获得真正表现得像链接的按钮，您需要更多的代码。 特别是将焦点按钮的样式设置在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;
/* Mozilla specific properties */
-moz-appearance: none;
/* Webkit specific properties */
-webkit-logical-height: 1em; /* should be auto, but since Chrome ignores auto, we have to use this hack to set the correct height */
-webkit-logical-width: auto; /* ignored by Chrome, but here for completeness */
}
/* Mozilla uses a pseudo-element to show focus on buttons - we don't want that anymore */
button::-moz-focus-inner {
border: none;
padding: 0;
}
/* Ensure that all browsers use an outline to show focus */
button:focus {
outline: 1px dotted;
}
上面的例子只修改了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;
}如果你不介意使用twitter bootstrap，我建议你只使用链接类。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-link">Link</button>