CSS 如何使按钮看起来像一个链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1367409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make button look like a link?
提问by adardesign
I need to make a button look like a link using CSS. The changes are done but when I click on it, it shows as if it's pushed as in a button. Any idea how to remove that, so that the button works as a link even when clicked?
我需要使用 CSS 使按钮看起来像一个链接。更改已完成，但是当我单击它时，它显示的好像是按按钮一样按下的。知道如何删除它，以便即使单击该按钮也可以作为链接使用吗？
回答by adardesign
button {
background: none!important;
border: none;
padding: 0!important;
/*optional*/
font-family: arial, sans-serif;
/*input has OS specific font-family*/
color: #069;
text-decoration: underline;
cursor: pointer;
}<button> your button that looks like a link</button>回答by Torben
The code of the accepted answer works for most cases, but to get a button that really behaves like a link you need a bit more code. It is especially tricky to get the styling of focused buttons right on Firefox (Mozilla).
接受的答案的代码适用于大多数情况，但要获得一个真正表现得像链接的按钮，您需要更多的代码。在 Firefox (Mozilla) 上获得焦点按钮的样式特别棘手。
The following CSS ensures that anchors and buttons have the same CSS properties and behave the same on all common browsers:
以下 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;
}
}
The example above only modifies buttonelements to improve readability, but it can easily be extended to modify input[type="button"], input[type="submit"]and input[type="reset"]elements as well. You could also use a class, if you want to make only certain buttons look like anchors.
上面的例子只是修改button元素以提高可读性，但它也可以很容易地扩展到修改input[type="button"], input[type="submit"]和input[type="reset"]元素。如果您只想使某些按钮看起来像锚点，您也可以使用类。
See this JSFiddlefor a live-demo.
请参阅此 JSFiddle以获取现场演示。
Please also note that this applies the default anchor-styling to buttons (e.g. blue text-color). So if you want to change the text-color or anything else of anchors & buttons, you should do this afterthe CSS above.
另请注意，这将默认锚定样式应用于按钮（例如蓝色文本颜色）。因此，如果您想更改文本颜色或锚点和按钮的任何其他内容，您应该在上面的 CSS之后执行此操作。
The original code (see snippet) in this answer was completely different and incomplete.
此答案中的原始代码（请参阅代码段）完全不同且不完整。
/* 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;
}回答by BoHyman Horseman
If you don't mind using twitter bootstrapI suggest you simply use the link class.
如果您不介意使用twitter bootstrap，我建议您只需使用链接类。
<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>I hope this helps somebody :) Have a nice day!
我希望这对某人有所帮助:) 祝您有美好的一天！
回答by knittl
try using the css pseudoclass :focus
尝试使用 css 伪类 :focus
input[type="button"], input[type="button"]:focus {
/* your style goes here */
}
editas for links and onclick events use (you shouldn't use inline javascript eventhandlers, but for the sake of simplicity i will use them here):
编辑链接和 onclick 事件使用（您不应该使用内联 javascript 事件处理程序，但为了简单起见，我将在此处使用它们）：
<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>
with this.href you can even access the target of the link in your function. return falsewill just prevent browsers from following the link when clicked.
使用 this.href，您甚至可以访问函数中链接的目标。return false只会阻止浏览器在单击时跟随链接。
if javascript is disabled the link will work as a normal link and just load some/page.php—if you want your link to be deadwhen js is disabled use href="#"
如果禁用JavaScript的链接将作为一个正常的链接，只加载some/page.php-如果你希望你的链接是死的时候JS是被禁止的使用href="#"
回答by Jacob Rask
You can't style buttons as links reliably throughout browsers. I've tried it, but there's always some weird padding, margin or font issues in some browser. Either live with letting the button look like a button, or use onClick and preventDefault on a link.
您无法在整个浏览器中可靠地将按钮样式设置为链接。我试过了，但在某些浏览器中总是存在一些奇怪的填充、边距或字体问题。要么让按钮看起来像一个按钮，要么在链接上使用 onClick 和 preventDefault 。
回答by GSB
You can achieve this using simple css as shown in below example
您可以使用简单的 css 实现这一点，如下例所示
button {
overflow: visible;
width: auto;
}
button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: blue;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
-moz-user-select: text;
/* override all your button styles here if there are any others */
}
button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: black;
}<button type="submit" class="link"><span>Button as Link</span></button>
