เว็บตัวอย่าง
เว็บตัวอย่าง http://www.designil.com
จาก url ของเว็บไซต์ด้านบนนะครับ ขอสรุปเนื้อหาสั้นๆดังนี้ครับ
การออกแบบปุ่ม สามารถแบ่งออกเป็น 3 หัวข้อใหญ่ๆดังนี้
1. ปุ่มหลัก
2. ปุ่มรอง
3. ปุ่มประเภทอื่นๆ
ประเภทที่ 1 ปุ่มหลัก
ปุ่มหลักจะประกอบไปด้วย คุณลักษณะหลักๆ 3 ตัวคือ สี,ตัวหนังสือ,ไอคอน นอกจากนั้น่แล้ว ยังต้องคำนึงถึงระยะห่างระหว่างตัวหนังสือด้วยครับ (margin,padding) หรือเพิ่มคุณลักษณะให้ปุ่มด้วย การทำให้ปุ่มมีลักษณะโค้งๆ (border-radius) หรือ จะใส่เงาให้กับปุ่มด้วย (box-shadow) เป็นต้นครับ
ตัวอย่างการทำให้ปุ่มโค้ง และ การใส่เงาให้กับปุ่ม
Button
จากปุ่มข้างบน เขียนได้ดังนี้
<div style=” width:100px; border:solid 1px #2c9af4; text-align:center; padding:5px; background:#2c9af4; color:#fff; border-radius:3px; box-shadow:1px 1px 5px #000;”>Button</div>