a和span组合定义按钮样式实例分享

<style type="text/css"> 
a:link { 
color: #3B5998; 
text-decoration: none; 
} 
.ui-base-button { 
background-image: url("a-bg.png"); 
background-position: right top; 
background-repeat: no-repeat; 
font-size: 12px; 
color: #414241; 
font-family: "宋体","Arial","Helvetica","Verdana","sans-serif"; 
padding-right:9px; 
padding-top:5px; 
padding-bottom:6px; 
} 
.ui-base-button span { 
background-image: url("a.png"); 
background-position: left top; 
background-repeat: no-repeat; 
padding-left:9px; 
padding-top:5px; 
padding-bottom:6px; 
} 
</style> 
<a class="ui-base-button" href="#"> 
<span>搜索</span> 
</a>

其中a.png是按钮的背景图片，是一张带边框的长矩形



这样显示出来的按钮为



其中a标签中嵌套span标签
<a><span>**</span></a>为主要形式，通过padding来控制文字的位置并且使得背景图片衔接的合理。