如何让按钮看起来像一个链接?

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的链接。修改已经完成，但当我点击它时，它会显示为按下按钮。你知道如何删除它，这样按钮在点击时就可以作为链接了吗?

6 个解决方案

#1

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;
}

See Demo (on JSfiddle)

#2

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 button elements 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.

上面的示例仅修改按钮元素以提高可读性，但它可以很容易地扩展到修改输入[type="button"]，输入[type="submit"]，输入[type="reset"]元素。如果您想使某些按钮看起来像锚点，也可以使用类。

See this JSFiddle for 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 after the 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;
}

#3

If you don't mind using twitter bootstrap I suggest you simply use the link class.

如果您不介意使用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>

I hope this helps somebody :) Have a nice day!

我希望这能帮助某人:)祝你今天愉快!

#4

try using the css pseudoclass :focus

尝试使用css伪类:focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

edit as 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 eventhandler，但是为了简单起见，我将在这里使用它们):

<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 false will just prevent browsers from following the link when clicked.

用这个。href甚至可以访问函数中链接的目标。返回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 dead when js is disabled use href="#"

如果禁用了javascript，链接将作为一个普通的链接工作，只加载一些/页面。php -如果你想让你的链接在js被禁用时失效，可以使用href="#"

#5

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。

#6

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>