加强资金集中的措施:四种CSS链接按钮示例

四种CSS链接按钮示例

代码下载：
http://www.blogjava.net/Files/sitinspring/CssLinkButton20081008210352.rar



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