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

如何使按钮看起来像一个链接 - 具体来说：文本装饰下划线/底部边框

3 个答案: