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

287

我需要使按钮看起来像使用CSS的链接。所做的更改已完成，但是当我单击它时，它似乎显示为已按下按钮。任何想法如何删除它，以便即使单击该按钮也可以用作链接？

css button hyperlink

4

链接上的onclick事件与按钮一样简单

— knittl

2

@ knittl，@ cletus实际上，链接和按钮在HTML中具有非常不同的含义。您应该阅读whatwg.org/specs/web-apps/current-work/multipage/…。将按钮设置为看起来像链接的样式可能不是一个好主意，但这取决于UI设计，而使用链接则违反HTML规范。

— 安东·斯特罗诺诺夫

5

有几个原因可能需要使按钮样式像链接一样。（1）按钮具有type =“ submit”（2）按钮具有精美的样式，即可变长度的背景图像

— TJ。

94

对于某些东西来说，将其作为按钮可能在语义上更正确，即使您希望它看起来像一个链接。例如，假设有一对“全部展开|全部折叠”链接可以更改页面上的内容。单击这些将引起操作，但不会将用户带到任何地方-语义是按钮的语义。但是，出于外观原因，设计师可能已指定了链接。因此，这实际上是一个很好的问题。

— shacker，2012年

17

我使用按钮而不是链接，因为使用链接触发JS方法，我被迫链接到#然后使用event.preventDefault()。链接到太讨厌了javascript:void(0);。

— Archonic

350

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>

展开摘要

— 阿达尔设计
source

23

我对小提琴的细微改动-将text-decoration：underline规则移至button：hover上。在我的分叉的小提琴中看到。

— odedbd 2013年

10

如果您不希望将所有按钮都设置为链接样式，请使用button.link {...styles...}then来定义样式<button class="link">Your button</button>。这也避免使用!important始终是一个好主意。

— Archonic

3

记得要照顾好outline。某些浏览器向其添加按钮。您可以设置outline-color: transparent。

— SiliconMind 2014年

4

请不要删除轮廓，否则

— Dominik

4

代替border-bottom使用text-decoration:underline。

— 2016年

86

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

展开摘要

— 托本
source

outline-offset: 0;如果大纲设置为无，为什么需要？

— Mohamad 2015年

我必须添加box-shadow: none所有内容以清除按钮上的所有样式

— Tobbe

另一个：text-transform: none;

— Shone Tow

75

如果您不介意使用twitter引导程序，建议您只使用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>

展开摘要

我希望这对某人有帮助:)祝你有美好的一天！

— BoJack骑士
source

7

这很好用，但留下了一些填充，而不是真正的<a>链接。只需添加padding：0！important样式就可以了。谢谢！

— 戴维

这似乎触发了使用jquery validate的表单验证

— Paul Becker

这不是一个可靠的解决方案。它不仅巧妙地破坏了垂直居中，而且隐式禁用了文本样式和字体大小更改。

— Radon Rosborough

5

尝试使用CSS伪类 :focus

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

编辑为链接和onclick事件使用（您不应该使用嵌入式javascript事件处理程序，但是为了简单起见，我将在这里使用它们）：

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

使用this.href，您甚至可以访问函数中链接的目标。return false只会阻止浏览器在单击时跟随链接。

如果禁用JavaScript的链接将作为一个正常的链接，只加载some/page.php-如果你希望你的链接是死的时候JS是被禁止的使用href="#"

— 针织
source

我会用它，但是对于要应用哪些更改并不十分确定，以免按钮缩进。

是的即使将paddina设为0，N仍然会缩进

4

您不能在整个浏览器中可靠地将按钮样式设置为链接。我已经尝试过了，但是在某些浏览器中总是存在一些奇怪的填充，边距或字体问题。让按钮看起来像一个按钮，或者在链接上使用onClick和preventDefault。

— 雅各布·拉斯克
source

2

当浏览器使用本机窗口小部件时，情况就是如此。即使是最近的浏览器，仍然适用吗？

— 2016年

1

是2017年，我的FireFox仍使用本机小部件。

— Michael Scheper

2

您可以使用简单的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>

展开摘要

— GSB
source