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

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

按钮{ 背景:没有!重要; 边界:没有; 填充:0 !重要; / *可选* / 字体:arial, sans-serif; /*输入有OS特定的字体-family*/ 颜色:# 069; 文字修饰:下划线; 光标:指针; ｝ <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 { 背景:无; 边界:没有; 颜色:红色 ｝ .buttonToLink:{徘徊 背景:无; 文字修饰:下划线; ｝ <button class="buttonToLink">一个简单的链接按钮</button>

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