背景色切換連結按鈕CSS代碼：
/**//*2008.10.08*/
#linkButtonDiv1 ul{}{
保證金：0；
填充：0；
清單樣式類型：無；
}
#linkButtonDiv1 li a{}{
寬度：100px；
高度：20px；
顯示：塊；
字體大小：16px；
邊距：5px；
邊框：1px 實線#000000；
內邊距：5px；
顏色：#000000；
背景顏色：#94b8e9；
文字裝飾：無；
文字對齊：居中；
}
#linkButtonDiv1 li a:hover{}{
顏色：#ffffff；
背景顏色：#336699；
文字裝飾：底線；
}
背景圖片切換連結按鈕CSS代碼：
/**//*2008.10.08*/
#linkButtonDiv2 ul{}{
保證金：0；
填充：0；
清單樣式類型：無；
}
#linkButtonDiv2 li a{}{
寬度：100px；
高度：20px；
顯示：塊；
字體大小：16px；
邊距：5px；
邊框：1px 實線#000000；
內邊距：5px；
顏色：#000000；
背景：url(../img/bg-0314.gif);
文字裝飾：無；
文字對齊：居中；
}
#linkButtonDiv2 li a:hover{}{
顏色：#ffffff；
背景：url(../img/bg-0315.gif);
文字裝飾：底線；
}
背景色出現效果按鈕範例：
/**//*2008.10.08*/
#linkButtonDiv3 ul{}{
保證金：0；
填充：0；
清單樣式類型：無；
}
#linkButtonDiv3 li a{}{
寬度：100px；
高度：20px；
顯示：塊；
字體大小：16px；
邊距：5px；
內邊距：5px；
顏色：#8d4f10；
背景：#efb57c；
文字裝飾：無；
文字對齊：居中；
邊框：2px開頭#efb57c；
}
#linkButtonDiv3 li a:hover{}{
字體粗細：粗體；
顏色：#ffffff；
背景：#daa670；
文字裝飾：底線；
邊框：2px開頭#daa670；
}
一張背景圖片左右切換按鈕CSS代碼：
/**//*2008.10.08*/
#linkButtonDiv4 ul{}{
保證金：0；
填充：0；
清單樣式類型：無；
}
#linkButtonDiv4 li a{}{
寬度：114px；
高度：24px；
顯示：塊；
字體大小：12px；
邊距：5px；
內邊距：5px；
顏色：#000000；
背景：url(../img/buttonbg.jpg) 不重複左上；
文字裝飾：無；
文字對齊：居中；
}
#linkButtonDiv4 li a:hover{}{
字體粗細：粗體；
顏色：#ffffff；
背景位置：右上；
文字裝飾：底線；
}
頁面HTML程式碼：
<body bgcolor="#cccccc">
<div id="bodyDiv">
<div id="標題">
<jsp:include page="/web/page/branch/header.jsp"/>
</div>
<div id="選單欄">
<jsp:include page="/web/page/branch/menubar.jsp"/>
</div>
<div id="內容">
<table border="0" width="100%" height="100%" style="table-layout:fixed;word-wrap:break-word;word-break;break-all;">
<tr>
<td valign =“頂部”寬度=“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 =“頂部”寬度=“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 =“頂部”寬度=“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 =“頂部”寬度=“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>
</表>
</div>
</div>
<div id="頁腳">
<jsp:include page="/web/page/branch/footer.jsp"/>
</div>
</正文>