Flexible CSS button (variable width and markup)

I'm trying to create a flexible CSS button, styled with only one image (or two, using the s开发者_JAVA百科liding door technique) but i want it to be flexible enough for multiple markup to have the same effect. For example:

<a href="">Button</a>

Would have the save effect as:

<input type="submit" value="Button" />

Any ideas or tuts laying around?

I don't think you can apply the sliding door technique to input elements. When I did it I used the button element:

<button type="submit"><span>Button</span></button>

You'd have to watch out with IE because it's a bit buggy (submitting the content of the button instead of it's value and when you have multiple submit buttons in a form submitting all buttons instead of the clicked one), but these cases are usually rare.

For a link I used:

<a href="..." class="button"><span>Link</span></a>

And the approximate CSS:

a.button,
button {
  color: #ffffff;
  background: transparent url(right.png) no-repeat top right;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border: none;
  padding: 0 8px 0 0;
  margin: 1px 0;
  height: 20px;
  overflow: visible;
  cursor: pointer;
}

a.button::-moz-focus-inner,
button::-moz-focus-inner {
  border: none;
}

a.button:focus,
button:focus {
  outline: 1px dotted buttontext;
}

a.button span,
button span {
  background: transparent url(left.png) no-repeat top left;
  padding: 2px 0 4px 8px;
  display: block;
}

If you want to use sliding doors, you can just add an element around the <input/>, right?

There's no pure CSS solutions to making a link submit, the only things in HTML that can submit are input elements, so you're stuck using <input type="button" /> and <input type="image" />.

I would use the Jquery submit event

So..

$('#my_button').click(function() {
  $(this).submit();
});

If you do not understand Jquery this will not make any sense.