无意中发现网站 http://mootools.net 首页CSS+JS制作的

button导航效果不错，剥离出来给大家共享。
代码如下：

<SCRIPT src="http://mootools.net/assets/scripts/mootools.js" type=text/javascript></SCRIPT> <SCRIPT src="http://mootools.net//assets/scripts/site.js" type=text/javascript></SCRIPT> <style> body{background-color: #1D1D20} #kwick {PADDING-RIGHT: 0px;PADDING-LEFT: 0px; MARGIN-BOTTOM: 10px;PADDING-BOTTOM:10px;PADDING- TOP: 10px;POSITION:relative;width:590px} #kwick .kwicks{DISPLAY: block; BACKGROUND: url([img]http://mootools.net/assets/images/trac.gif[/img]) #1d1d20 no-repeat right top; HEIGHT: 100px} #kwick LI{FLOAT: left} #kwick .kwick{BORDER-RIGHT: #1d1d20 5px solid; PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 10px; OVERFLOW: hidden; WIDTH: 135px; CURSOR: pointer; PADDING-TOP: 10px; HEIGHT: 100px} #kwick .kwick SPAN{DISPLAY: none} #kwick .download{BACKGROUND: url([img] http://mootools.net/assets/images/download.gif[/img]) #78ba91} #kwick .documentation {BACKGROUND: url([img]http://mootools.net/assets/images/docs.gif[/img]) #7389ae} #kwick .forum{BACKGROUND: url([img]http://mootools.net/assets/images/forum.gif[/img]) #c17878} #kwick .trac{BACKGROUND: url([img]http://mootools.net/assets/images/trac.gif[/img]) #a87aad;BORDER-RIGHT-WIDTH:0px} </style> <DIV id=kwick> <UL class=kwicks> <LI><A class="kwick download" href="#"><SPAN>Download now</SPAN></A></LI> <LI><A class="kwick documentation" href="#"><SPAN>Documentation</SPAN></A> </LI> <LI><A class="kwick forum" href="#"><SPAN>The Forum</SPAN></A> </LI> <LI><A class="kwick trac" href="#"><SPAN>Keep Trac</SPAN></A></LI> </UL> </DIV>
提示：您可以先修改部分代码再运行

[attach]

55[/attach]

mootools.js中的代码没有处理，能力有限，其余剥离出来的site.js和style.css

文件代码都将用的代码处理掉了！

这个效果不错。收下先 ！  呵呵

太棒了，刚好想要这么一个呢。

来回一个。。支持。。。