我需要使一个按钮看起来像一个链接使用CSS。更改已经完成，但当我点击它时，它显示的就像在按钮中被按下一样。有什么想法如何删除，以便按钮作为一个链接，即使点击?
当前回答
如果你不介意使用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>
其他回答
button {
text-decoration: underline;
cursor: pointer;
}
<button onClick="javascript:window.location.href='link'">Domain</button>
如果你不介意使用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>
接受答案的代码适用于大多数情况，但要获得一个真正像链接一样工作的按钮，您需要更多的代码。在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; }
我认为这很容易做到，只需要几行。这是我的解决方案
.buttonToLink { 背景:无; 边界:没有; 颜色:红色 ｝ .buttonToLink:{徘徊 背景:无; 文字修饰:下划线; ｝ <button class="buttonToLink">一个简单的链接按钮</button>
按钮{ 背景:没有!重要; 边界:没有; 填充:0 !重要; / *可选* / 字体:arial, sans-serif; /*输入有OS特定的字体-family*/ 颜色:# 069; 文字修饰:下划线; 光标:指针; ｝ <button>你的按钮看起来像一个链接
