A-AA+then

ปุ่ม 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 สามารถใช้งานกับปุ่มซ้ำๆกันได้หลายปุ่มเลยทีเดียว

<div class="css_nav">
<a href="http://www.xxx.com"><span>ข้อความภายในปุ่ม 1</span></a>
<a href="http://www.xxx.com"><span>ข้อความภายในปุ่ม 2</span></a>
</div>

Relate

^