将提交按钮的锚点样式转换为什么？

Question

我有一个CSS类，可以使我的链接看起来像漂亮的按钮。我希望能够将相同的样式应用于提交按钮，并使它们看起来相同。最棘手的部分是锚标记需要在内部包含一个span，我认为这对于表单提交按钮来说是不可能的。那么，有人知道如何使提交按钮与链接匹配吗？

以下是CSS代码：

a.button {
    background: transparent url('images/all_pages/bg_button_a.jpg') no-repeat scroll top right;
    color: #FFF;
    display: block;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('images/all_pages/bg_button_span.jpg') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}


a.button:hover {
    background-position: bottom right;
}

a.button:hover span {
    background-position: bottom left;
}

谢谢！

- John Isaacks

Answer 1

尝试使用<button>标签代替<input type="submit">。 <button>标签允许您嵌套元素，如<span>，一般来说，它给予您更多的样式自由度。

一旦您将表单的提交按钮切换为使用<button>标签，您可以将相同的CSS应用于链接和按钮。

a.button,
button {
  /* ... */
}
a.button span,
button span {
  /* ... */
}
a.button:hover,
a.button:focus,
button:hover,
button:focus {
  /* ... */
}
a.button:hover span,
a.button:focus span,
button:hover span,
button:focus span {
  /* ... */
}

为了提高可访问性，上面每个 :hover 样式块都扩展到包括 :focus 状态。

这是一篇不错的关于使用 <button> 标签的文章：http://particletree.com/features/rediscovering-the-button-element/。

- Ron DeVera

Answer 2

使用 <button type="submit"><span>提交！</span></button> 呢？

此外，您可能会发现 这里描述的技术 很有趣。

- Zack Mulgrew

Answer 3

您可以使用<a href="javascript: document.myform.submit()"></a>或类似的方式通过常规链接提交表单。这样，您就不需要按钮了。 :)

- evilpenguin

---

在可访问性和向后兼容性方面，这种技术有很多问题，使其成为众多选择中可能是最糟糕的选择。 - Zack The Human

是的，如果浏览器没有启用Javascript，这将会出现错误。 - Kris

最好编程时以最低公共分母为准。唉，摇头。 - cchamberlain