Freecode : CSS

วิธีทำลิงก์ธรรมดาให้เป็นปุ่ม

CSS ชุดนี้จะทำให้ลิงก์ของคุณดูเหมือนปุ่มกด และสามารถเลือกทำ effect กับลิงก์เฉพาะบางตัวได้ด้วย
วิธีการนำไปใช้ก็คือ เอาโค้ดข้างล่างนี้ไปใส่ในส่วน <HEAD> ของคุณครับ (ยังมีต่อ) <style type='text/css'> a.Button { border-style: solid; border-width: 1px; border-color: #c0c0c0; color: #000000; font-family: "MS Sans Serif", Arial, Tahoma, sans-serif; font-size: 8pt; font-style: normal; font-weight: normal; padding: 2px; padding-left: 6px; padding-right: 6px; position: relative; text-decoration: none; } a.Button:hover { border-color: #f0f0f0 #505050 #505050 #f0f0f0; text-decoration: none; border-style: solid; border-width: 1px; font-family: "MS Sans Serif", Arial, Tahoma, sans-serif; font-size: 8pt; font-style: normal; font-weight: normal; padding: 2px; padding-left: 6px; padding-right: 6px; position: relative; } </style>

ทีนี้ ถ้าเราอยากให้ลิงก์ไหนเป็นปุ่ม ก็ใส่ class=Button ลงไปในแท็ก <A href=... > <a href="http://realdev.truehits.net" class=Button> HOME </a>  <a href="http://realdev.truehits.net/freecode.php" class=Button> FREECODE </a>  <a href="http://realdev.truehits.net/webboard.php" class=Button> WEBBOARD </a>

HOME FREECODE WEBBOARD

ผมไม่ถนัดเรื่องศิลปะครับ คงแต่งสีไม่ค่อยสวย ถ้าเพื่อนๆอยากลองแก้ค่าสีดูเองก็ได้ครับ ผมมี ตารางสรุปคำสั่ง CSS ให้ครับ อยู่ในบทเรียน CSS

Back top top

		© copyright 2001 Sorrawut Korsuwansiri