css - 转换提交按钮的 anchor 样式？

Question

我有一个 CSS 类，它使我的链接看起来像漂亮的按钮。我希望能够将相同的样式应用于提交按钮并使它们看起来也一样。最棘手的部分是 anchor 标签内部需要有一个跨度，我认为表单提交按钮不可能做到这一点。那么有谁知道如何使提交按钮与链接匹配？

这是 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;
}

谢谢!

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 的每个 block 上面的样式扩展到涵盖 :focus国家也是如此。

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