两款CSS按钮式水平菜单，蓝色和绿色

演示效果截图

用到的图片

CSS代码

.hbuttons a{display: block;text-decoration: none;font: bold 13px Arial;
color: black;width: 78px;height: 23px;float: left;display: inline;
margin-right: 8px;background-image:url(tabsquare.jpg);background-repeat: no-repeat;
padding-top: 4px;text-align:center;}
.hbuttons a:hover{background-image:url(tabsquareover.jpg);}
.bbuttons a{display: block;text-decoration: none;font: bold 13px Arial;
color: black;width: 78px;height: 23px;float: left;display: inline;
margin-right: 8px;background-image:url(menu.jpg);background-repeat: no-repeat;
padding-top: 4px;text-align:center;}
.bbuttons a:hover{background-image:url(menuover.jpg);}

HTML代码

<div class="hbuttons">
<a href="http://www.865171.cn">Home</a>
<a href="http://www.865171.cn">Submit</a>
<a href="http://www.865171.cn">Resources</a>
<a href="http://www.865171.cn">Contact</a>
</div>
<div style="clear: left;"></div>
<div class="bbuttons">
<a href="http://www.865171.cn">Home</a>
<a href="http://www.865171.cn">Submit</a>
<a href="http://www.865171.cn">Resources</a>
<a href="http://www.865171.cn">Contact</a>
</div>
<div style="clear: left;"></div>
www.865171.cn