Styling a submit button using CSS and images - html

Question

i want to make and style submit buttons i.e.
input type="submit" style="buttonClass">
using CSS and provided images, that works on both hover as well as normal state, however i'm unable to reach the desired output.
I created the buttons using anchor tags and span which are perfect but i want the same look and feel for submit buttons also.
PS: i cannot use the moz and webtooolkit of css3 as my target browser will be IE7 and IE 8, and further i have to use the client provided images only.Is there any way around for submit button<input type="submit"> to reach the desired output just similar to the buttons as created using the anchor buttons <a><span></span></a>?
HTML AS IS
<a class="buttonImage" href="javascript:blankCheck('Approve');"><span> <bean:message key="button.common.submit"/> </span></a>
HTML TO BE
<input type="submit" class="buttonImage">
CSS AS IS for buttons using anchor
.buttonImage span {
background: url('common/images/LeftButton.png') no-repeat 0 0; display: block;
line-height: 14px; padding: 7px 0 5px 8px; color: #1b1d60;
}
.buttonImage
{
background: url('common/images/RightButton.png') no-repeat top right;
display: block; float: left; height: 26px; margin-right: 6px;
padding-right: 7px; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
font-size:12px; font-weight:bold;
}
.buttonImage:hover span {
background-position: 0 -26px; color: #fff;
}
.buttonImage:hover {
background-position: right -26px;
}

Answer 1

Live Demo
Hi now change to some properties your css stylesheet or add two div in your anchor tag
as like this
Please check to this
Css
.buttonImage{
display:inline-block;
vertical-align:top;
text-decoration:none;
}
.buttonImage .left_img {
background: url('http://i.stack.imgur.com/634e1.png') no-repeat 0 0;
float:left; line-height: 15px; padding: 7px 0 5px 8px; color: #1b1d60;
}
.right_img{
background: url('http://i.stack.imgur.com/SyeSO.png') no-repeat 0 0;
float:left; height: 27px;
width:7px;
}
.buttonImage:hover .left_img, .buttonImage:hover .right_img{
background-position:0 -26px;
color:#fff;
}
HTML
<a class="buttonImage" href="javascript:blankCheck('Approve');">
<span class="left_img"> <bean:message key="button.common.submit"/>Hello this is coding
</span>
<span class="right_img"></span>
</a>
Demo