Normally buttons look something like this...

...and the markup for that would be:

<input type="button" value="Submit" />

HTML does offer us another means of creating buttons with the <button> tag.

I prefer using button tags to the input type="button" option, because this affords me the opprtunity to style input fields independantly from buttons in my forms, without causing a clutter of classes and id's.

Same result...

Submit

...different markup:

<button type="submit" value="Submit">Submit</button>

The HTML spec dictates that we have to put the button element inside paragraph tags, because it is an inline element (just bear that in mind). What you'll also notice, is that we have an opening and closing tag for the button element - this means we do not have to use text as the actual button.

I can also use images ... like this:

You'll notice that my button still has the grey background and standard border - we'll fix that in a bit with some CSS. For the purposes of this tutorial, I'll be using an id, but should use the button element as your style selector or end up with a lot of tags if you'll be using a lot of buttons.

Using the following markup...

<button type="submit" value="Submit" id="styled"><img src="butt01.gif" alt="Button" /></button>

...and then style as follows:

#styled{
margin:0;
padding:0;
background:0;
border:0 !important;
cursor:pointer;
}

...and the result will be:

The margin, padding and background values are important for obvious reasons (you can/should declare these in your CSS reset if you're using a CSS reset), the border value is important and you should use the !important rule or the border will persist. The W3C's also insists that it should be obvious that it is a button - you can/should do this by naming it and by using the cursor attribute. If you're having problems with the cursor attribute (I have run into problems when using the "button" selector), you can make this an !important rule too.