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

尝试使用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>

用这个。Href甚至可以在函数中访问链接的目标。return false只会阻止浏览器在点击链接时跟踪该链接。

如果javascript被禁用，链接将像正常链接一样工作，只需加载__abc0 -如果你想要你的链接是死，当js被禁用时使用href="#"

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

接受答案的代码适用于大多数情况，但要获得一个真正像链接一样工作的按钮，您需要更多的代码。在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;
}

如果你不介意使用twitter引导，我建议你简单地使用链接类。

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

我希望这能帮助到一些人:)祝你有美好的一天!

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

我认为这很容易做到，只需要几行。这是我的解决方案

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


.buttonToLink:hover{
background: none;
text-decoration: underline;
}

<button  class="buttonToLink">A simple link button</button>

 button {
text-decoration: underline;
cursor: pointer;
}


<button onClick="javascript:window.location.href='link'">Domain</button>