BASIC WIDGET

Button Widget

Button Widget คืออะไร

Button Widget เป็นวิดเก็ตที่ช่วยให้เราสามารถสร้าง และออกแบบปุ่มให้กับเว็บไซต์ของเราได้โดยที่ไม่จำเป็นต้องเขียน Code HTML

ความหมายต่างๆ ของพารามิเตอร์ในแต่ล่ะ TAB

Content

  1. Type : กำหนดชนิดของปุ่ม โดยสามารถเลือกได้ 5 แบบ คือ
    • Default
    • Info
    • Success
    • Warning
    • Danger
  2. Text : กำหนดข้อความให้กับปุ่ม
  3. Link : กำหนดลิงค์ให้กับปุ่ม โดยสามารถกำหนดเป็น
    • Open in New Window => เปิดลิงค์ในหน้าต่างใหม่
    • เพิ่ม rel=nofollow
  4. Alignment : กำหนดตำแหน่งให้กับปุ่ม (อ้างอิงตามคอลัมป์)
    • Left : ชิดซ้าย
    • Right : ชิดขวา
    • Center : จัดกึ่งกลาง
    • Justify : ขยายเต็มความกว้าง
  5. Size : กำหนดขนาดให้กับปุ่ม (ตามมาตรฐานของโปรแกรม)
    • Extra Small
    • Small
    • Medium
    • Large
    • Extra Large
  6. Icon : ใส่ไอคอนให้กับปุ่ม
  7. Icon Position : กำหนดตำแหน่งให้ไอคอน
    • Before => ด้านหน้า
    • After => หน้าหลัง
  8. Icon Spacing : กำหนดช่องว่างหระหว่างไอคอนกับข้อความ
  9. Button ID : กำหนด ID ให้กับปุ่ม

Style

  1. Typography : กำหนดรูปแบบตัวอักษรให้กับปุ่ม
  2. Text Shadow : กำหนดเงาให้กับตัวอักษรในปุ่ม
  3. Text Color : กำหนดสีให้กับตัวอักษร
  4. Background Color : กำหนดสีพื้นหลัง
  5. Hover Animation : กำหนดแอนนิเมชั่น ในเมื่อเอาเมาส์ชี้ที่ปุ่ม
  6. Border Type : กำหนดเส้นขอบของปุ่ม
  7. Width : กำหนดความหนาให้กับปุ่ม
  8. Color : กำหนดสีให้กับเส้นขอบ
  9. Border Radius : กำหนดมุมให้กับปุ่ม
  10. Box Shadow : กำหนดเงาให้กับปุ่ม
  11. Padding : กำหนดช่องว่างระหว่างตัวอักษรและขอบของปุ่ม

Advance

อยู่ระหว่างการปรับปรุง

การสร้างปุ่มสำหรับโหลด File PDF

ทำการก๊อปปี้ Link File แล้วนำไปวางในช่อง Link ของ Button Widget

* Link File สามารถนำ Link ภายนอกเข้ามาใส่แทนได้

ขนาดมาตรฐานของ Padding ของปุ่ม

Top, Left, Bottom, Right

  • Extra Small: 10px, 20px, 10px, 20px
  • Small: 12px, 24px, 12px, 24px
  • Medium: 15px, 30px, 15px, 30px
  • Large: 20px, 40px, 20px, 40px
  • Extra Large: 25px, 50px, 25px, 50px

ตัวอย่าง