我如何使按钮看起来像一个链接 - 具体:文本 - 任务下划线 /底部边框

Question

如何使按钮看起来像锚标签？

我尝试了下面的HTML，但是当我悬停在按钮上时，底部边框看起来与其他锚标签并不相同。边框底部看起来在文本下方约为3px，而在锚固标签上，它们之间只有1px。

我只会使用链接，但是我已经读到一个按钮对我的情况更正确。

<style>
.epUnsubscribe {
    float: left;
}
    .epUnsubscribe button {
        background: none!important;
        border: none;
        padding: 0!important;
        cursor: pointer;
        border-bottom: 1px solid #ffffff;
        color: #5C8C9B;
    }
        .epUnsubscribe button:hover {
            border-bottom: 1px solid #5C8C9B;
        }
</style>
<div style="float: left" class="epUnsubscribe">
        <button id="BtnUnsubscribe">Unsubscribe</button>
    </div>

Answer 1

它不是超链接上的边框，而是下划线，请尝试以下操作：

.epUnsubscribe button:hover {
  border: none;
  text-decoration: underline;
}

Answer 2

使用实际链接可能更容易使用onclick="..."回调。

Answer 3

链接没有底部边界，它们具有强调

text-decoration:underline