CSS rollover button เพื่อ SEO (2)
ปุ่ม rollover อีกแบบ ที่ใช้รูปภาพเป็นพื้นหลังแล้วใช้ข้อความแสดงบนปุ่มแทนการใช้รูปภาพล้วนๆ ทำให้ไม่ต้องสร้างรูปภาพหลายๆรูป เพียงแค่ทำพื้นหลังของปุ่มเพียง 2 รูปเท่านั้น
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 สามารถใช้งานกับปุ่มซ้ำๆกันได้หลายปุ่มเลยทีเดียว
<a href="http://www.xxx.com"><span>ข้อความภายในปุ่ม 1</span></a>
<a href="http://www.xxx.com"><span>ข้อความภายในปุ่ม 2</span></a>
</div>