背景色切换链接按钮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代码：

背景色切换链接按钮示例 链接按钮一 链接按钮二 链接按钮三 链接按钮四 链接按钮五 链接按钮六

背景图片切换链接按钮示例 链接按钮一 链接按钮二 链接按钮三 链接按钮四 链接按钮五 链接按钮六

背景色突起效果按钮示例 链接按钮一 链接按钮二 链接按钮三 链接按钮四 链接按钮五 链接按钮六

一张背景图片左右切换按钮示例 链接按钮一 链接按钮二 链接按钮三 链接按钮四 链接按钮五 链接按钮六