消息資訊

分享互聯網行業資訊,探訪網站扶植新風向

星翼設想教你四種CSS鏈接按鈕完成方式

日期:2013-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代碼:





 

在線客服

掃描二維碼頓時微信相同:

  • 微信小法式定制開辟、微信公家號定制開辟
    微信小法式定制開辟

  • 微信公家號代經營、微信公家號托管
    微信公家號開辟經營

點擊頓時在線相同:

辦事熱線

0755-82685986 、 82685936

159-8667-8737(微信同號)
24小時熱線德律風,非任務時候主動呼喚轉移

郵箱

marekt@iswweb.com
電子郵箱

掃碼加微

15986678737 掃碼加微信相同
前往頂部