使用CSS和图像设置提交按钮的样式

Question

我想制作和设置提交按钮，即

  

input type =“submit”style =“buttonClass”＆gt;

使用CSS和提供的图像，既适用于悬停也适用于正常状态，但是我无法达到所需的输出。 我创建了使用锚标签和跨度的按钮，这些按钮非常完美，但我也希望提交按钮具有相同的外观和感觉。 PS：我不能使用css3的moz和webtooolkit，因为我的目标浏览器将是IE7和IE 8，而且我还必须使用客户端提供的图像。有任何方法可以提交按钮<input type="submit">以达到所需的输出与使用锚点按钮<a><span></span></a>创建的按钮类似？

HTML AS IS

 <a class="buttonImage" href="javascript:blankCheck('Approve');"><span> <bean:message key="button.common.submit"/> </span></a>

HTML

<input type="submit" class="buttonImage">

CSS AS IS用于使用锚点

的按钮

.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 的

您好现在更改为某些属性您的css stylesheet或add two div in your anchor tag

就像这样

请查看此

<强>的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 的