<html>
<head>
<title>圆角按钮CSS实现</title>
<style type="text/css">
a.l-btn span.l-btn-left{
display:inline-block;
background:url('http://www.codefans.net/jscss/demoimg/201306/button_span_bg.gif') no-repeat top left;
padding:4px 0px 4px 18px;
line-height:16px;
height:16px;
}
a.l-btn{
color:#444;
background:url('http://www.codefans.net/jscss/demoimg/201306/button_a_bg.gif') no-repeat top right;
font-size:12px;
text-decoration:none;
display:inline-block;
zoom:1;
height:24px;
padding-right:18px;
cursor:pointer;
outline:none;
}
a.l-btn-plain span.l-btn-left{
background:transparent;
padding-left:5px;
}
a.l-btn span span.l-btn-text{
display:inline-block;
height:16px;
line-height:16px;
padding:0px;
}
.icon-add{
background:url('http://www.codefans.net/jscss/demoimg/201306/edit_add.png') no-repeat;
}
</style>
</head>
<body>
<a class="l-btn" href="#">
<span class="l-btn-left">
<span class="l-btn-text icon-add" style="padding-left: 20px;">Add</span>
</span>
</a>
</body>
</html>
<head>
<title>圆角按钮CSS实现</title>
<style type="text/css">
a.l-btn span.l-btn-left{
display:inline-block;
background:url('http://www.codefans.net/jscss/demoimg/201306/button_span_bg.gif') no-repeat top left;
padding:4px 0px 4px 18px;
line-height:16px;
height:16px;
}
a.l-btn{
color:#444;
background:url('http://www.codefans.net/jscss/demoimg/201306/button_a_bg.gif') no-repeat top right;
font-size:12px;
text-decoration:none;
display:inline-block;
zoom:1;
height:24px;
padding-right:18px;
cursor:pointer;
outline:none;
}
a.l-btn-plain span.l-btn-left{
background:transparent;
padding-left:5px;
}
a.l-btn span span.l-btn-text{
display:inline-block;
height:16px;
line-height:16px;
padding:0px;
}
.icon-add{
background:url('http://www.codefans.net/jscss/demoimg/201306/edit_add.png') no-repeat;
}
</style>
</head>
<body>
<a class="l-btn" href="#">
<span class="l-btn-left">
<span class="l-btn-text icon-add" style="padding-left: 20px;">Add</span>
</span>
</a>
</body>
</html>