html - 以图像为背景并使用 href 的 html 按钮的良好做法

Question

我一直在阅读有关如何实现按钮的内容。有很多答案。

没有人深入探讨为什么某个特定版本优于另一个。今天的标准良好做法是什么？

我特别要找的按钮是一个 image(没有文字)，使用 href 并且必须 submit。

我想出了以下方法，但它不起作用:

<button class="btn-googleplus" href="/auth/google" type="submit"></button>

<input type="submit" class="btn-googleplus" />

button .btn-googleplus {
    background-image: url("img/googleplus.png") no-repeat center center;
}

我见过这样的变体(我不喜欢，因为在按钮标签内有一个 img 看起来很复杂):

<button href="/auth/google" type="submit">
    <img id="img" src="img/googleplus.png" />
</button>

Answer 1

将 href 添加到 button 将不起作用。您需要将按钮放在一个表单中，在该表单中您在 action 属性中指定您的 href 值(url)。

<form action="/auth/google">
    <button href="/auth/google" type="submit">
        <img id="img" src="img/googleplus.png" />
    </button>
</form>