Convert Anchor style for Submit buttons?

Question

I have a CSS class that makes my links look like nice looking buttons. I would like to be able to apply the same style to Submit buttons and make them look the same as well. The trickiest part is that the anchor tags need to have a span inside them, I don't think that is possible with form submit buttons. So does anyone know how I can make the submit buttons match the links?

Here is the 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;
}

Thanks!

Answer 1

Try using the <button> tag instead of <input type="submit">. The <button> tag lets you nest elements like <span>, and generally gives you much more styling freedom.

Once you have switched your forms' submit buttons to use the <button> tag, you can then apply the same CSS to both your links and your buttons:

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

Here's a decent article on doing so: http://particletree.com/features/rediscovering-the-button-element/

Answer 2

What about using a <button type="submit"><span>Submit!</span></button> instead?

In addition, you may find the technique described here interesting.

Answer 3

You could use <a href="javascript: document.myform.submit()"></a> or something similar to submit the forms via regular links. Then, you don't need buttons. :)