ตัวอย่างปุ่มลิงค์ CSS สี่ปุ่ม

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

#linkButtonDiv1 ul{}{
ระยะขอบ:0;
ช่องว่างภายใน:0;
รายการสไตล์ประเภท: ไม่มี;
}

#linkButtonDiv1 เป็น{}{
ความกว้าง:100px;
ความสูง:20px;

จอแสดงผล: ล็อค;
ขนาดตัวอักษร: 16px;

ระยะขอบ:5px;

เส้นขอบ: 1px ทึบ #000000;

ช่องว่างภายใน:5px;

สี:#000000;
สีพื้นหลัง:#94b8e9;
การตกแต่งข้อความ: ไม่มี;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
}

#linkButtonDiv1 เป็น:โฮเวอร์{}{
สี:#ffffff;
สีพื้นหลัง:#336699;
การตกแต่งข้อความ:ขีดเส้นใต้;
-

ภาพพื้นหลัง切换链接按钮CSS代码：
/**//*2008.10.08*/

#linkButtonDiv2 ul{}{
ระยะขอบ:0;
ช่องว่างภายใน:0;
รายการสไตล์ประเภท: ไม่มี;
}

#linkButtonDiv2 เป็น{}{
ความกว้าง:100px;
ความสูง:20px;

จอแสดงผล: ล็อค;
ขนาดตัวอักษร: 16px;

ระยะขอบ:5px;

เส้นขอบ: 1px ทึบ #000000;

ช่องว่างภายใน:5px;

สี:#000000;
พื้นหลัง:url(../img/bg-0314.gif);
การตกแต่งข้อความ: ไม่มี;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
}

#linkButtonDiv2 เป็น:โฮเวอร์{}{
สี:#ffffff;
พื้นหลัง:url(../img/bg-0315.gif);
การตกแต่งข้อความ:ขีดเส้นใต้;
-

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

#linkButtonDiv3 ul{}{
ระยะขอบ:0;
ช่องว่างภายใน:0;
รายการสไตล์ประเภท: ไม่มี;
}

#linkButtonDiv3 เป็น{}{
ความกว้าง:100px;
ความสูง:20px;

จอแสดงผล: ล็อค;
ขนาดตัวอักษร: 16px;

ระยะขอบ:5px;

ช่องว่างภายใน:5px;

สี:#8d4f10;
พื้นหลัง:#efb57c;

การตกแต่งข้อความ: ไม่มี;
การจัดตำแหน่งข้อความ: กึ่งกลาง;

เส้นขอบ:2px เริ่มแรก #efb57c;
}

#linkButtonDiv3 เป็น:โฮเวอร์{}{
แบบอักษรน้ำหนัก: ตัวหนา;
สี:#ffffff;
พื้นหลัง:#daa670;
การตกแต่งข้อความ:ขีดเส้นใต้;

เส้นขอบ:2px เริ่ม #daa670;
-

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

#linkButtonDiv4 ul{}{
ระยะขอบ:0;
ช่องว่างภายใน:0;
รายการสไตล์ประเภท: ไม่มี;
}

#linkButtonDiv4 เป็น{}{
ความกว้าง:114px;
ความสูง:24px;

จอแสดงผล: ล็อค;
ขนาดตัวอักษร: 12px;

ระยะขอบ:5px;

ช่องว่างภายใน:5px;

สี:#000000;
พื้นหลัง:url(../img/buttonbg.jpg) ไม่ทำซ้ำด้านบนซ้าย;
การตกแต่งข้อความ: ไม่มี;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
}

#linkButtonDiv4 เป็น:โฮเวอร์{}{
แบบอักษรน้ำหนัก: ตัวหนา;
สี:#ffffff;
ตำแหน่งพื้นหลัง: ด้านบนขวา;
การตกแต่งข้อความ:ขีดเส้นใต้;
-

页的HTML代码：