Convert Anchor Style to Submit Buttons?

Question

I have a CSS class that makes my links look like pretty buttons. I would like to be able to apply the same style as the submit buttons and make them the same. The most difficult part is that the anchor tags should have an interval inside them, I don’t think that this is possible using the form submit buttons. So does anyone know how I can make the submit buttons match 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 a tag <button>instead <input type="submit">. The tag <button>allows you to insert type elements <span>and, as a rule, gives you much more styling freedom.

, <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>?

, , .

Answer 3

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