To change the buttons you want to be using CSS and possibly editing the template. What I would suggest though is you rather than editing the template try ‘all CSS” solutions.
The rough CSS for this would be:
{
background: url('imagelocation') no-repeat;
height: sizeofimageheight px;
width: sizeofimagewidth px;
text-indent: enoughtonotshow px;
overflow: hidden;
}
I’ll explain that a bit. What you are doing is loading a background image, then you are setting the height and width and positioning the text part outside of that so it won’t in theory show.
The class you want to link to you would be:
button, a.button, input[type="submit"], input[type="button"], input[type="reset"], ul.button-nav li a, div.generic-button a, .comment-reply-link
Just pick which ones you want for which images out of that list and do each one separately. You may need to set background-image rather than background to get around the gradients but the principle is there.
