如何使button看起来像一个链接？
我需要使一个button看起来像使用CSS的链接。 所做的更改已经完成，但是当我点击它时，它会显示为按下button。 任何想法如何删除，使button作为一个链接，即使点击了？
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; }
查看演示（在JSfiddle上）
接受的答案的代码适用于大多数情况下，但要得到一个真正的行为像一个链接的button，你需要更多的代码：
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; }
PS：如果只使用button元素，则可以安全地移除input元素的select器，反之亦然。
如果你不介意使用twitter引导，我build议你只使用链接类 。
<link href="ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-link">Link</button>
尝试使用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被禁用链接将作为一个正常的链接，只是加载some/page.php – 如果你想你的链接死了 js被禁用使用href="#"
您无法在整个浏览器中将button设置为可靠链接。 我已经尝试过了，但是在某些浏览器中总会出现一些奇怪的填充，边距或字体问题。 或者让button看起来像一个button，或者在链接上使用onClick和preventDefault。
你可以使用简单的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>
