Question

How can I make a button look like an anchor tag?

I tried the HTML below, but when I hover over the button, the bottom border doesn’t look the same as other anchor tags. The border bottom looks to be about 3px below the text, while on a anchor tags, there is only 1px between them.

I would just use a link, but I have read that a button would be more semantically correct for my situation.

<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

It isn’t a border on hyperlinks, it is an underline, try this:

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