Vier Beispiele für CSS-Link-Buttons

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

#linkButtonDiv1 ul{}{
Rand:0;
Polsterung:0;
Listenstiltyp:none;
}

#linkButtonDiv1 li a{}{
Breite: 100 Pixel;
Höhe:20px;

Anzeige:bolck;
Schriftgröße: 16px;

Rand: 5px;

Rand: 1 Pixel durchgehend #000000;

Polsterung:5px;

Farbe:#000000;
Hintergrundfarbe:#94b8e9;
Textdekoration: keine;
text-align:center;
}

#linkButtonDiv1 li a:hover{}{
Farbe:#ffffff;
Hintergrundfarbe:#336699;
Textdekoration:unterstrichen;
}

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

#linkButtonDiv2 ul{}{
Rand:0;
Polsterung:0;
Listenstiltyp:none;
}

#linkButtonDiv2 li a{}{
Breite: 100 Pixel;
Höhe:20px;

Anzeige:bolck;
Schriftgröße: 16px;

Rand: 5px;

Rand: 1 Pixel durchgehend #000000;

Polsterung:5px;

Farbe:#000000;
Hintergrund:url(../img/bg-0314.gif);
Textdekoration: keine;
text-align:center;
}

#linkButtonDiv2 li a:hover{}{
Farbe:#ffffff;
Hintergrund:url(../img/bg-0315.gif);
Textdekoration:unterstrichen;
}

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

#linkButtonDiv3 ul{}{
Rand:0;
Polsterung:0;
Listenstiltyp:none;
}

#linkButtonDiv3 li a{}{
Breite: 100 Pixel;
Höhe:20px;

Anzeige:bolck;
Schriftgröße: 16px;

Rand: 5px;

Polsterung:5px;

Farbe:#8d4f10;
Hintergrund:#efb57c;

Textdekoration: keine;
text-align:center;

border:2px Anfang #efb57c;
}

#linkButtonDiv3 li a:hover{}{
Schriftstärke:fett;
Farbe:#ffffff;
Hintergrund:#daa670;
Textdekoration:unterstrichen;

border:2px Anfang #daa670;
}

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

#linkButtonDiv4 ul{}{
Rand:0;
Polsterung:0;
Listenstiltyp:none;
}

#linkButtonDiv4 li a{}{
Breite: 114 Pixel;
Höhe:24px;

Anzeige:bolck;
Schriftgröße: 12px;

Rand: 5px;

Polsterung:5px;

Farbe:#000000;
Hintergrund: URL (../img/buttonbg.jpg) norepeat links oben;
Textdekoration: keine;
text-align:center;
}

#linkButtonDiv4 li a:hover{}{
Schriftstärke:fett;
Farbe:#ffffff;
Hintergrundposition:rechts oben;
Textdekoration:unterstrichen;
}

页面HTML-代码: