html - 我怎样才能让按钮看起来像一个链接 - 特别是 : text-decoration underline/bottom border

Question

如何使按钮看起来像 anchor 标记？

我尝试了下面的 HTML，但是当我将鼠标悬停在按钮上时，底部边框看起来与其他 anchor 标记不一样。底部边框看起来在文本下方约 3px，而在 anchor 标签上，它们之间只有 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;
}