4 つの CSS リンク ボタンの例

背景色切换链接按钮CSS代番号：
/**//*2008.10.08*/

#linkBut​​tonDiv1 ul{}{
マージン:0;
パディング:0;
リストスタイルタイプ:なし;
}

#linkBut​​tonDiv1 リア{}{
幅:100ピクセル;
高さ:20ピクセル;

表示:ボルト;
フォントサイズ: 16px;

マージン:5px;

ボーダー: 1px ソリッド #000000;

パディング:5px;

色:#000000;
背景色:#94b8e9;
テキスト装飾:なし;
テキスト整列:中央;
}

#linkBut​​tonDiv1 li a:hover{}{
色:#ffffff;
背景色:#336699;
テキスト装飾:下線;
}

背景画像切换链接按钮CSS代コード：
/**//*2008.10.08*/

#linkBut​​tonDiv2 ul{}{
マージン:0;
パディング:0;
リストスタイルタイプ:なし;
}

#linkBut​​tonDiv2 リア{}{
幅:100ピクセル;
高さ:20ピクセル;

表示:ボルト;
フォントサイズ: 16px;

マージン:5px;

ボーダー: 1px ソリッド #000000;

パディング:5px;

色:#000000;
背景:url(../img/bg-0314.gif);
テキスト装飾:なし;
テキスト整列:中央;
}

#linkBut​​tonDiv2 li a:hover{}{
色:#ffffff;
背景:url(../img/bg-0315.gif);
テキスト装飾:下線;
}

背景色突起效果按钮の例：
/**//*2008.10.08*/

#linkBut​​tonDiv3 ul{}{
マージン:0;
パディング:0;
リストスタイルタイプ:なし;
}

#linkBut​​tonDiv3 リア{}{
幅:100ピクセル;
高さ:20ピクセル;

表示:ボルト;
フォントサイズ: 16px;

マージン:5px;

パディング:5px;

色:#8d4f10;
背景:#efb57c;

テキスト装飾:なし;
テキスト整列:中央;

ボーダー:2px アウトセット #efb57c;
}

#linkBut​​tonDiv3 li a:hover{}{
フォントの太さ:太字;
色:#ffffff;
背景:#daa670;
テキスト装飾:下線;

ボーダー:2px アウトセット #daa670;
}

一背景写真左右切换按钮CSS代コード：
/**//*2008.10.08*/

#linkBut​​tonDiv4 ul{}{
マージン:0;
パディング:0;
リストスタイルタイプ:なし;
}

#linkBut​​tonDiv4 リア{}{
幅:114ピクセル;
高さ:24ピクセル;

表示:ボルト;
フォントサイズ: 12px;

マージン:5px;

パディング:5px;

色:#000000;
背景:url(../img/buttonbg.jpg) norepeat 左上;
テキスト装飾:なし;
テキスト整列:中央;
#linkBut

​​tonDiv4 li a:hover{}{
フォントの太さ:太字;
色:#ffffff;
背景位置:右上;
テキスト装飾:下線;
}

页面HTML代：