四种CSS链接按钮示例

　2008-11-24 19:30:20　来源：WEB开发网　　　

核心提示：背景色切换链接按钮CSS代码：/**//*2008.10.08*/#linkButtonDiv1 ul{}{ margin:0; padding:0; list-style-type:none;}#linkButtonDiv1 li a{}{ width:100px; height:20px; disp

背景色切换链接按钮CSS代码：
/**//*2008.10.08*/

#linkButtonDiv1 ul{}{
　 margin:0;
　 padding:0;
　 list-style-type:none;
}

#linkButtonDiv1 li a{}{
　 width:100px;
　 height:20px;
　
　 display:bolck;　
　 font-size: 16px;
　　　
　 margin:5px;
　
　 border: 1px solid #000000;
　
　 padding:5px;
　
　 color:#000000;
　 background-color:#94b8e9;
　 text-decoration:none;
　 text-align:center;
}

#linkButtonDiv1 li a:hover{}{
　 color:#ffffff;
　 background-color:#336699;
　 text-decoration:underline;
}

背景图片切换链接按钮CSS代码：
/**//*2008.10.08*/

#linkButtonDiv2 ul{}{
　 margin:0;
　 padding:0;
　 list-style-type:none;
}

#linkButtonDiv2 li a{}{
　 width:100px;
　 height:20px;
　
　 display:bolck;　
　 font-size: 16px;
　　　
　 margin:5px;
　
　 border: 1px solid #000000;
　
　 padding:5px;
　
　 color:#000000;
　 background:url(../img/bg-0314.gif);
　 text-decoration:none;
　 text-align:center;
}

#linkButtonDiv2 li a:hover{}{
　 color:#ffffff;
　 background:url(../img/bg-0315.gif);
　 text-decoration:underline;
}

背景色突起效果按钮示例：
/**//*2008.10.08*/

#linkButtonDiv3 ul{}{
　 margin:0;
　 padding:0;
　 list-style-type:none;
}

#linkButtonDiv3 li a{}{
　 width:100px;
　 height:20px;
　
　 display:bolck;　
　 font-size: 16px;
　　　
　 margin:5px;
　
　 padding:5px;
　
　 color:#8d4f10;
　 background:#efb57c;
　
　 text-decoration:none;
　 text-align:center;
　
　 border:2px outset #efb57c;
}

#linkButtonDiv3 li a:hover{}{
　 font-weight:bold;
　 color:#ffffff;
　 background:#daa670;
　 text-decoration:underline;
　
　 border:2px outset #daa670;
}

一张背景图片左右切换按钮CSS代码：
/**//*2008.10.08*/

#linkButtonDiv4 ul{}{
　 margin:0;
　 padding:0;
　 list-style-type:none;
}

#linkButtonDiv4 li a{}{
　 width:114px;
　 height:24px;
　
　 display:bolck;　
　 font-size: 12px;
　　　
　 margin:5px;
　
　 padding:5px;
　
　 color:#000000;
　 background:url(../img/buttonbg.jpg) norepeat left top;
　 text-decoration:none;
　 text-align:center;
}

#linkButtonDiv4 li a:hover{}{
　 font-weight:bold;
　 color:#ffffff;
　 background-position:right top;
　 text-decoration:underline;
}

页面HTML代码：
<body bgcolor="#cccccc">
　 <div id="bodyDiv">
　　　 <div id="header">
　　　　　 <jsp:include page="/web/page/branch/header.jsp"/>
　　　 </div>
　　　 <div id="menubar">
　　　　　 <jsp:include page="/web/page/branch/menubar.jsp"/>
　　　 </div>
　　　 <div id="content">
　　　　　 <table border="0" width="100%" height="100%" style="table-layout:fixed;Word-wrap:break-word;word-break;break-all;">
　　　　　　　 <tr>
　　　　　　　　　 <td valign="top" width="25%">
　　　　　　　　　　　 <div class="contentTitle">
　　　　　　　　　　　　　 <strong>背景色切换链接按钮示例</strong>
　　　　　　　　　　　 </div>
　　　　　　　　　　　 <div id="linkButtonDiv1" class="contentConcept">
　　　　　　　　　　　　　 <ul>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮一</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮二</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮三</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮四</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮五</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮六</a></li>
　　　　　　　　　　　　　 </ul>
　　　　　　　　　　　 </div>
　　　　　　　　　 </td>
　　　　　　　　　
　　　　　　　　　 <td valign="top" width="25%">
　　　　　　　　　　　 <div class="contentTitle">
　　　　　　　　　　　　　 <strong>背景图片切换链接按钮示例</strong>
　　　　　　　　　　　 </div>
　　　　　　　　　　　 <div id="linkButtonDiv2" class="contentConcept">
　　　　　　　　　　　　　 <ul>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮一</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮二</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮三</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮四</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮五</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮六</a></li>
　　　　　　　　　　　　　 </ul>
　　　　　　　　　　　 </div>
　　　　　　　　　 </td>
　　　　　　　　　
　　　　　　　　　 <td valign="top" width="25%">
　　　　　　　　　　　 <div class="contentTitle">
　　　　　　　　　　　　　 <strong>背景色突起效果按钮示例</strong>
　　　　　　　　　　　 </div>
　　　　　　　　　　　 <div id="linkButtonDiv3" class="contentConcept">
　　　　　　　　　　　　　 <ul>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮一</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮二</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮三</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮四</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮五</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮六</a></li>
　　　　　　　　　　　　　 </ul>
　　　　　　　　　　　 </div>
　　　　　　　　　 </td>
　　　　　　　　　
　　　　　　　　　 <td valign="top" width="25%">
　　　　　　　　　　　 <div class="contentTitle">
　　　　　　　　　　　　　 <strong>一张背景图片左右切换按钮示例</strong>
　　　　　　　　　　　 </div>
　　　　　　　　　　　 <div id="linkButtonDiv4" class="contentConcept">
　　　　　　　　　　　　　 <ul>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮一</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮二</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮三</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮四</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮五</a></li>
　　　　　　　　　　　　　　　 <li><a href="#">链接按钮六</a></li>
　　　　　　　　　　　　　 </ul>
　　　　　　　　　　　 </div>
　　　　　　　　　 </td>
　　　　　　　 </tr>
　　　　　 </table>
　　　 </div>　　　
　 </div>
　 <div id="footer">
　　　 <jsp:include page="/web/page/branch/footer.jsp"/>
　 </div>
</body>