新闻资讯

分享互联网行业资讯,探寻网站建设新风向

星翼设计教你四种CSS链接按钮实现方法

日期:2012-07-29

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