在网上看到一个用 CSS 自定义 “按钮” 样式，看起来象按钮其实是一个链接了，用链接模拟的按钮，看起来很漂亮，我们可以用来做网站的导航，链接，按钮等等。
不过，这个方式有一个不太好的地方就是 <a> 标签里套了一个空的 <span> ，从 html 语义化的角度来说，这个是不应该的。
先看看效果吧，也可以把源文件下载下来研究：
一、要使用的图片，如下图，如果你想修改颜色，可以 下载PSD 的文件
二、实现的原理，如图：
<li><a href="#" title="products"><span></span>阿宝工作室</a></li>
一个容器里放一个 <a>(链接)，<a>(链接) 里放 <span>，这里的 <span> 主要是放左边的圆角图片，<a>(链接) 是放右边的图片，用来自适应按钮的背景图片，这里提示一点，确保你的图片要足够宽，而不被文字撑破。
三、HTML 代码
<ul class="green"> <li><a href="#" title="home">绿色的按钮</a></li> <li><a href="#" title="products">项目</a></li> <li><a href="#" title="blog">阿宝工作室</a></li> <li><a href="#" title="contact">留言板</a></li> </ul>
这里用了一个 <ul> 是为了创建一个列表，然后在 <a> 里面加入 <span></span> 就是为了加左边的背景图片。
<ul class="green"> <li><a href="#" title="home" class="current"><span></span>绿色的按钮</a></li> <li><a href="#" title="products"><span></span>项目</a></li> <li><a href="#" title="blog"><span></span>阿宝工作室</a></li> <li><a href="#" title="contact"><span></span>留言板</a></li> </ul>
第一个按钮用了 class="current" 是表示不同形式的呈现按钮。
四、CSS 样式
1. ul 样式：
ul.green { padding: 5px; margin: 10px 0; list-style: none; background-color: #fff; border-bottom: 1px solid #e7e7e7; float: left; clear: left;}
2. li 样式：
ul.green li {float: left;}
3. a 样式：
ul.green li a {float: left; text-decoration: none; color: #ccc; padding: 4px 15px 0 0; margin-right: 8px; font: 900 14px "Arial", Helvetica, sans-serif;}
4. span 样式：
ul.green li a span { float: left; padding-right: 15px; display: block; margin-top: -4px; height: 24px;}
5. hover 鼠标经过样式：
ul.green li a:hover { color: #576d07; background: url(images/green.png) no-repeat top right; }
ul.green li a:hover span { background: url(images/green.png) no-repeat top left;}
6. class="current" 是表示不同形式的呈现按钮：
ul.green li a.current {background: url(images/green.png) no-repeat top right;color: #576d07;}
ul.green li a.current span {background: url(images/green.png) no-repeat top left;}
ul.green li a.current:hover {background: url(images/blue.png) no-repeat top right;color: #0d5f83;}
ul.green li a.current:hover span {background: url(images/blue.png) no-repeat top left;}