四种CSS链接按钮示例

　　背景色切换链接按钮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
　　　　　　　　　　　　　　　　lia href="http://j5c.ddvip.com/index.php#"链接按钮一/a/li
　　　　　　　　　　　　　　　　lia href="http://j5c.ddvip.com/index.php#"链接按钮二/a/li
　　　　　　　　　　　　　　　　lia href="http://j5c.ddvip.com/index.php#"链接按钮三/a/li
　　　　　　　　　　　　　　　　lia href="http://j5c.ddvip.com/index.php#"链接按钮四/a/li
　　　　　　　　　　　　　　　　lia href="http://j5c.ddvip.com/index.php#"链接按钮五/a/li
　　　　　　　　　　　　　　　　lia href="http://j5c.ddvip.com/index.php#"链接按钮六/a/li
　　　　　　　　　　　　　　/ul
　　　　　　　　　　　　/div
　　　　　　　　　　/td
　　　　　　　　　　td valign="top" width="25%"
　　　　　　　　　　　　div class="contentTitle"
　　　　　　　　　　　　　　strong背景图片切换链接按钮示例/strong
　　　　　　　　　　　　/div
　　　　　　　　　　　　div id="linkButtonDiv2" class="contentConcept"
　　　　　　　　　　　　　　ul