Styling a submit button using CSS and images

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

Left Right

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;
}

right image left

score 0 · Answer 1 · answered Nov 08 '12 at 07:12

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('https://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('https://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

Thanx rohit, but i think i missed the point in my question that i need to style the buttons, so please provide your inputs on my new query.Due to framework restrictions i am advised not to use buttons using — user1697113, Nov 08 '12 at 08:33

Styling a submit button using CSS and images

1 Answers1