Question

我有一个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;
}

谢谢！

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/

Answer 2

如果使用<button type="submit"><span>Submit!</span></button>呢？

此外，您可能会发现technique described here有趣。

Answer 3

您可以使用<a href="javascript: document.myform.submit()"></a>或类似内容通过常规链接提交表单。然后，你不需要按钮。：）

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

3 个答案: