Css 转换提交按钮的锚样式？

我有一个CSS类，使我的链接看起来像漂亮的按钮。我想能够应用相同的风格提交按钮，使他们看起来一样。最棘手的部分是锚定标记内部需要有一个跨度，我认为表单提交按钮不可能做到这一点。那么，有人知道如何使提交按钮与链接匹配吗

以下是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;
}

谢谢

尝试使用

标记而不是

。

标记允许您嵌套类似

的元素，并且通常为您提供更多的样式自由

一旦将表单的提交按钮切换为使用

标记，就可以将相同的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

状态

这里有一篇关于使用

标签的不错的文章：

使用

提交怎么样而不是

此外，您可能会发现其中的有趣之处。
您可以使用
或类似工具通过常规链接提交表单。那么，您就不需要按钮了。：）
 在可访问性和向后兼容性方面，这项技术有很多方面，这可能是许多选择中最糟糕的选择。是的，如果浏览器没有启用Javascript，这将崩溃。是的，最好以最低的公分母编程。。smh。