按钮-有图片

1、************************

 

.button01{
 border:none;
 width:77px;
 height:28px;
 line-height:28px;
 background:url(../images/button01.gif) no-repeat 0 0;
 cursor:pointer;
 color:#007AC3;
 margin:0 10px 0 0;
}

 

 

<div class="fL">
    <button class="button01" onmouseover="className='button01a'" onmouseout="className='button01'">添加</button>
    <button class="button01" onmouseover="className='button01a'" onmouseout="className='button01'">删除</button>
   </div>

 

 

2、***************************

<button onmouseover="className='buttona'" onmouseout="className=''">登录</button>

 

 

#signIn BUTTON,#signIn02 BUTTON{
 border:none;
 background:url(../images/signIn_button.gif) no-repeat 0 0;
 width:155px;
 height:52px;
 overflow:hidden;
 padding:52px 0 0;
 cursor:pointer;
 margin:22px 0 0 35px;
}
#signIn BUTTON.buttona,#signIn02 BUTTON.buttona{
 background:url(../images/signIn_button.gif) no-repeat 0 -52px;
}

 

 

 

 

 

3、**********************

 

 

<input type="image" name="imageField" src="button.png">