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

时间:2009-09-02 12:31:14

标签: css button hyperlink

我需要使用CSS制作一个看起来像链接的按钮。更改已完成,但是当我单击它时,它显示为按下按钮。知道如何删除它,以便即使单击按钮也可以作为链接使用吗?

7 个答案:

答案 0 :(得分:291)

HTML

<button>your button that looks like a link</button>

CSS

button {
     background:none;
     color:inherit;
     border:none; 
     padding:0!important;
     font: inherit;
     /*border is optional*/
     border-bottom:1px solid #444; 
     cursor: pointer;
}

See Demo (on JSfiddle)

答案 1 :(得分:83)

接受答案的代码适用于大多数情况,但要获得一个真正表现得像链接的按钮,您需要更多代码。在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"]元素。如果你只想使某些按钮看起来像锚点,你也可以使用一个类。

请参阅this JSFiddle了解直播演示。

请注意,这会将默认锚样式应用于按钮(例如蓝色文本颜色)。因此,如果您想要更改文本颜色或其他任何锚点和&amp;按钮,你应该在上面的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;
}

答案 2 :(得分:66)

如果您不介意使用twitter bootstrap我建议您只使用link class

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

我希望这有助于某人:)祝你有愉快的一天!

答案 3 :(得分:5)

尝试使用css pseudoclass :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="#" < / p>

答案 4 :(得分:4)

您无法在整个浏览器中可靠地将按钮设置为链接。我试过了,但在某些浏览器中总会出现一些奇怪的填充,边距或字体问题。要么让按钮看起来像一个按钮,要么使用onClick并在链接上使用preventDefault。

答案 5 :(得分:2)

您可以使用简单的css实现此目的,如下例

所示

&#13;
&#13;
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;
}
&#13;
<button type="submit" class="link"><span>Button as Link</span></button>
&#13;
&#13;
&#13;

enter image description here

答案 6 :(得分:0)

我认为用很少的几行代码就很容易做到。这是我的解决方法

.buttonToLink{
   background: none;
   border: none;
   color: red
}

.buttonToLink:hover{
   background: none;
   text-decoration: underline;
}
<button  class="buttonToLink">A simple link button</button>