GORAGOD.com

ซ่อนข้อความบนปุ่มด้วย CSS

โจทย์ของผมก็คือ ผมมีปุ่มค้นหาอยู่ ซึ่งแต่เดิมมันมีข้อความ "ค้นหา" อยู่บนปุ่ม และผมต้องการที่จะเปลี่ยนลักษณะของปุ่มโดยเอาข้อความออก (หรือซ่อนข้อความ) แล้วแสดงรูปภาพบนปุ่มแทนด้วย CSS

วิธีการทำก็แสนขะง่ายครับ

input[type="submit"] {
  color: transparent; /* ใช้สี transparent กับข้อความ ก็มองไม่เห็นแล้ว */
  background: #666 url(img/search.png) 50% 50% no-repeat; /* วาดรูป search.png ลงบนปุ่ม */
}

ตัวอย่าง