GORAGOD.com

CSS rollover button เพื่อ SEO (2)

ปุ่ม rollover อีกแบบ ที่ใช้รูปภาพเป็นพื้นหลังแล้วใช้ข้อความแสดงบนปุ่มแทนการใช้รูปภาพล้วนๆ ทำให้ไม่ต้องสร้างรูปภาพหลายๆรูป เพียงแค่ทำพื้นหลังของปุ่มเพียง 2 รูปเท่านั้น

.css_nav span {
 text-align:center;
 font-size:8pt; /* ขนาดตัวอักษรของปุ่ม */
 font-family:tahoma; /* แบบตัวอักษรของปุ่ม */
 color:#000000;
 margin:0 30px;
 line-height:44px; /* สูงเท่ากับความสูงของปุ่ม */
 display:block;
 cursor:pointer;
}
.css_nav a {
 background:url('downbtn.jpg') no-repeat; /* รูปปุ่มปกติ */
 display:block;
 width:211px;  /* ขนาดของปุ่ม */
 height:44px;  /* ขนาดของปุ่ม */
 text-decoration:none;
}
.css_nav a:hover {
 background:url('overbtn.jpg') no-repeat; /* รูปปุ่มเมื่อเมาส์อยู่บนปุ่ม */
}

โค้ด HTML สามารถใช้งานกับปุ่มซ้ำๆกันได้หลายปุ่มเลยทีเดียว