下面是个四种CSS链接按钮示例教程，撑握了其技术要点，学起来就简单多了。赶紧跟着图老师小编一起来看看吧！
【 tulaoshi.com - Web开发 】
背景色切换链接按钮CSS代码：
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）/**//*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
来源:https://www.tulaoshi.com/n/20160219/1621653.html
