四种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?http://www.xvna.com);
    text-decoration:none;
    text-align:center;
}

#linkButtonDiv2 li a:hover{}{
    color:#ffffff;
    background:url(../img/bg-0315.gif?http://www.xvna.com);
    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?http://www.xvna.com) 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>
                                <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="top" width="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="top" width="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="top" width="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>
            </table>
        </div>
    </div>
    <div id="footer">
        <jsp:include page="/web/page/branch/footer.jsp"/>
    </div>
</body>

炫浪学院

上一篇：用CSS写的星级评分下一篇：整理优化你的CSS代码