4개의 CSS 링크 버튼 예

背景color切换链接按钮CSS代码:
/**//*2008.10.08*/

#linkButtonDiv1 ul{}{
여백:0;
패딩:0;
목록 스타일 유형:없음;
}

#linkButtonDiv1 li a{}{
너비:100px;
높이:20px;

디스플레이:볼크;
글꼴 크기: 16px;

여백:5px;

테두리: 1px 솔리드 #000000;

패딩:5px;

색상:#000000;
배경색:#94b8e9;
텍스트 장식:없음;
텍스트 정렬:가운데;
}

#linkButtonDiv1 li a:hover{}{
색상:#ffffff;
배경색:#336699;
텍스트 장식:밑줄;
}

背景图文切换链接按钮CSS代码:
/**//*2008.10.08*/

#linkButtonDiv2 ul{}{
여백:0;
패딩:0;
목록 스타일 유형:없음;
}

#linkButtonDiv2 li a{}{
너비:100px;
높이:20px;

디스플레이:볼크;
글꼴 크기: 16px;

여백:5px;

테두리: 1px 솔리드 #000000;

패딩:5px;

색상:#000000;
배경:url(../img/bg-0314.gif);
텍스트 장식:없음;
텍스트 정렬:가운데;
}

#linkButtonDiv2 li a:hover{}{
색상:#ffffff;
배경:url(../img/bg-0315.gif);
텍스트 장식:밑줄;
}

背景color突起效果按钮示例:
/**//*2008.10.08*/

#linkButtonDiv3 ul{}{
여백:0;
패딩:0;
목록 스타일 유형:없음;
}

#linkButtonDiv3 li a{}{
너비:100px;
높이:20px;

디스플레이:볼크;
글꼴 크기: 16px;

여백:5px;

패딩:5px;

색상:#8d4f10;
배경:#efb57c;

텍스트 장식:없음;
텍스트 정렬:가운데;

테두리:2px 시작 #efb57c;
}

#linkButtonDiv3 li a:hover{}{
글꼴 두께:굵게;
색상:#ffffff;
배경:#daa670;
텍스트 장식:밑줄;

테두리:2px 시작 #daa670;
}

一张背景图文左右切换按钮CSS代码:
/**//*2008.10.08*/

#linkButtonDiv4 ul{}{
여백:0;
패딩:0;
목록 스타일 유형:없음;
}

#linkButtonDiv4 li a{}{
너비:114px;
높이:24px;

디스플레이:볼크;
글꼴 크기: 12px;

여백:5px;

패딩:5px;

색상:#000000;
background:url(../img/buttonbg.jpg) 왼쪽 상단에 반복하지 않음;
텍스트 장식:없음;
텍스트 정렬:가운데;
}

#linkButtonDiv4 li a:hover{}{
글꼴 두께:굵게;
색상:#ffffff;
배경 위치:오른쪽 상단;
텍스트 장식:밑줄;
}

페이지HTML대답: