四種CSS連結按鈕範例

背景色切換連結按鈕CSS代碼：
/**//*2008.10.08*/

#linkBut​​tonDiv1 ul{}{
保證金：0；
填充：0；
清單樣式類型：無；
}

#linkBut​​tonDiv1 li a{}{
寬度：100px；
高度：20px；

顯示：塊；
字體大小：16px；

邊距：5px；

邊框：1px 實線#000000；

內邊距：5px；

顏色：#000000；
背景顏色：#94b8e9；
文字裝飾：無；
文字對齊：居中；
}

#linkBut​​tonDiv1 li a:hover{}{
顏色：#ffffff；
背景顏色：#336699；
文字裝飾：底線；
}

背景圖片切換連結按鈕CSS代碼：
/**//*2008.10.08*/

#linkBut​​tonDiv2 ul{}{
保證金：0；
填充：0；
清單樣式類型：無；
}

#linkBut​​tonDiv2 li a{}{
寬度：100px；
高度：20px；

顯示：塊；
字體大小：16px；

邊距：5px；

邊框：1px 實線#000000；

內邊距：5px；

顏色：#000000；
背景：url(../img/bg-0314.gif);
文字裝飾：無；
文字對齊：居中；
}

#linkBut​​tonDiv2 li a:hover{}{
顏色：#ffffff；
背景：url(../img/bg-0315.gif);
文字裝飾：底線；
}

背景色出現效果按鈕範例：
/**//*2008.10.08*/

#linkBut​​tonDiv3 ul{}{
保證金：0；
填充：0；
清單樣式類型：無；
}

#linkBut​​tonDiv3 li a{}{
寬度：100px；
高度：20px；

顯示：塊；
字體大小：16px；

邊距：5px；

內邊距：5px；

顏色：#8d4f10；
背景：#efb57c；

文字裝飾：無；
文字對齊：居中；

邊框：2px開頭#efb57c；
}

#linkBut​​tonDiv3 li a:hover{}{
字體粗細：粗體；
顏色：#ffffff；
背景：#daa670；
文字裝飾：底線；

邊框：2px開頭#daa670；
}

一張背景圖片左右切換按鈕CSS代碼：
/**//*2008.10.08*/

#linkBut​​tonDiv4 ul{}{
保證金：0；
填充：0；
清單樣式類型：無；
}

#linkBut​​tonDiv4 li a{}{
寬度：114px；
高度：24px；

顯示：塊；
字體大小：12px；

邊距：5px；

內邊距：5px；

顏色：#000000；
背景：url(../img/buttonbg.jpg) 不重複左上；
文字裝飾：無；
文字對齊：居中；
}

#linkBut​​tonDiv4 li a:hover{}{
字體粗細：粗體；
顏色：#ffffff；
背景位置：右上；
文字裝飾：底線；
}

頁面HTML程式碼：