ตกแต่งปุ่มกด Button ด้วย Bootstrap 5

Bootstrap 5 มีคลาสสำหรับตกแต่งปุ่มกด Button จำนวนหนึ่ง โดยให้ใช้คลาส .btn เพื่อตกแต่งปุ่มกดตามสไตล์ของ Bootstrap หากต้องการปุ่มกดที่มีสีพื้นหลังแบบต่าง ๆ ให้เพิ่มคลาสเหล่านี้เข้าไป ประกอบด้วยคลาส .btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-link

<div class="container mt-5">
  <h2>การใช้งาน Bootstrap 5</h2>
  <p>ตกแต่งปุ่มกดสวย ๆ ด้วย Bootstrap 5</p>     
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-link">Link</button> 
</div>

โดยปุ่มที่ได้จากการใช้คลาสต่างๆ ข้างต้น จะมีหน้าตาดังนี้

สำหรับเอลิเมนต์ที่สามารถใช้งานคลาสดังกล่าวได้ ประกอบด้วยเอลิเมนต์ <a>, <button>, <input>

<div class="container mt-5">
  <h2>การใช้งาน Bootstrap 5</h2>
  <p>ตกแต่งปุ่มกดสวย ๆ ด้วย Bootstrap 5</p>     
  <a href="#" class="btn btn-success">ปุ่มกดที่สร้างจากเอลิเมนต์ a</a>
  <button type="button" class="btn btn-success">ปุ่มกดที่สร้างจากเอลิเมนต์ button</button>
  <input type="button" class="btn btn-success" value="ปุ่มกดที่สร้างจากเอลิเมนต์ input">
  <input type="submit" class="btn btn-success" value="ปุ่มกดที่สร้างจากเอลิเมนต์ input">
  <input type="reset" class="btn btn-success" value="ปุ่มกดที่สร้างจากเอลิเมนต์ input"> 
</div>

โดยปุ่มที่ได้จากเอลิเมนต์ดังกล่าว จะมีหน้าตาดังนี้

ใส่เส้นขอบให้ปุ่ม

Bootstrap 5 มีคลาสสำหรับกำหนดเส้นขอบให้ปุ่มกดสวย ๆ ดังนี้

.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-dang, .btn-outline-dark, .btn-outline-light

โดยคลาสต่าง ๆ ดังกล่าว ต้องใช้ร่วมกับคลาส .btn ดังตัวอย่าง

<div class="container mt-5">
    <h2>การใช้งาน Bootstrap 5</h2>
    <p>ใส่เส้นขอบให้ปุ่มด้วย Bootstrap 5</p>
    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>
    <button type="button" class="btn btn-outline-light text-dark">Light</button>
  </div>

โดยปุ่มที่ใช้คลาสดังกล่าว จะมีเส้นขอบปรากฏอยู่รอบๆปุ่ม

นอกจากนี้ เวลานำเมาส์ไปวางเหนือปุ่ม จะมีสีพื้นหลังปรากฏขึ้นมาเป็นการเน้นปุ่มนั้น ๆ ให้เด่นขึ้น

ถ้ามีการคลิกที่ปุ่ม เมื่อนำเมาส์ออกจากปุ่มแล้ว จะปรากฏเส้นขอบหนาๆฟุ้งๆที่รอบๆปุ่ม

กำหนดขนาดให้ปุ่มกด

เราสามารถกำหนดขนาดให้มีขนาดที่ใหญ่หรือเล็กกว่าปกติได้ โดยถ้าต้องการให้ปุ่มกดมีขนาดใหญ่กว่าปกติ ให้ใช้คลาด .btn-lg แต่ถ้าต้องการให้ปุ่มกดมีขนาดเล็กกว่าปกติ ให้ใช้คลาส .btn-sm

<div class="container mt-5">
    <h2>การใช้งาน Bootstrap 5</h2>
    <p>ใส่เส้นขอบให้ปุ่มด้วย Bootstrap 5</p>
    <button type="button" class="btn btn-primary btn-lg">ปุ่มกดขนาดใหญ่ btn-lg</button>
    <button type="button" class="btn btn-primary">ปุ่มกดขนาดปกติ</button>
    <button type="button" class="btn btn-primary btn-sm">ปุ่มกดขนาดเล็ก btn-sm</button>
  </div>

เปรียบเทียบปุ่มแต่ละขนาด

Block Level Buttons สร้างปุ่มที่มีความกว้างเต็มพื้นที่บล็อก

ถ้าต้องการสร้างปุ่มที่มีความกว้างเต็มความกว้างของเอลิเมนต์ที่บรรจุปุ่มนั้น ๆ อยู่ (block-level buttons) สามารถทำได้โดยกำหนดคลาส .d-grid ให้กลับเอลิเมนต์ที่ครอบปุ่มนั้น หรือเรียกว่าเอลิเมนต์แม่ (Parent Element) เช่น สมมติว่าปุ่มนั้นอยู่ในเอลิเมนต์ <div> ก็ให้กำหนดคลาส .d-grid ให้กับเอลิเมนต์ <div> ดังนี้ <div class="d-grid">

<div class="container mt-5">
    <h2>การใช้งาน Bootstrap 5</h2>
    <p>ตกแต่งปุ่มกดสวยๆด้วย Bootstrap 5</p>
    <div class="d-grid">
      <button type="button" class="btn btn-primary btn-block">ปุ่มกดที่มีขนาดกว้างเต็มความกว้างของเอลิเมนต์แม่</button>
    </div> 
  </div>

ผลลัพธ์ที่ได้จะเป็นดังนี้

ถ้าเราวางปุ่มแบบ block-level buttons ไว้หลายปุ่ม ปุ่มเหล่านั้นจะแสดงผลติดกัน

เราสามารถกำหนดระยะห่างระหว่างปุ่มเหล่านั้นได้โดยการกำหนดคลาส .gap-* (แทนเครื่องหมาย * ด้วยตัวเลขสำหรับกำหนดระยะห่าง) เช่น .gap-3 ในเอลิเมนต์แม่

<div class="container mt-5">
    <h2>การใช้งาน Bootstrap 5</h2>
    <p>ตกแต่งปุ่มกดสวยๆด้วย Bootstrap 5</p>
    <div class="d-grid gap-3">
      <button type="button" class="btn btn-primary btn-block">ปุ่มกดที่มีขนาดกว้างเต็มความกว้างของเอลิเมนต์แม่ ปุ่มที่ 1</button>
      <button type="button" class="btn btn-primary btn-block">ปุ่มกดที่มีขนาดกว้างเต็มความกว้างของเอลิเมนต์แม่ ปุ่มที่ 2</button>
      <button type="button" class="btn btn-primary btn-block">ปุ่มกดที่มีขนาดกว้างเต็มความกว้างของเอลิเมนต์แม่ ปุ่มที่ 3</button>
      <button type="button" class="btn btn-primary btn-block">ปุ่มกดที่มีขนาดกว้างเต็มความกว้างของเอลิเมนต์แม่ ปุ่มที่ 4</button>
      <button type="button" class="btn btn-primary btn-block">ปุ่มกดที่มีขนาดกว้างเต็มความกว้างของเอลิเมนต์แม่ ปุ่มที่ 5</button>
    </div> 
  </div>

กำหนดสถานะ Active/Disabled ให้ปุ่ม

เราสามารถกำหนดสถานะ Active ให้ปุ่มได้โดยการกำหนดคลาส .active หรือทำให้ปุ่มไม่สามารถคลิกได้ โดยใช้แอททริบิวต์ disabled ตามปกติ

อย่างไรก็ตาม ถ้าใช้เอลิเมนต์ <a> จะไม่สามารถกำหนดแอททริบิวต์ disabled ได้ แต่สามารถใช้การกำหนดคลาส .disabled แทนได้ ดังนี้

<div class="container mt-5">
    <h2>การใช้งาน Bootstrap 5</h2>
    <p>ตกแต่งปุ่มกดสวยๆด้วย Bootstrap 5</p>
    <button type="button" class="btn btn-primary active">ปุ่มนี้กำหนดคลาส active</button>
    <button type="button" class="btn btn-primary" disabled>ปุ่มนี้ใช้งานไม่ได้</button>
    <a href="#" class="btn btn-primary disabled">ลิงก์นี้ใช้งานไม่ได้</a>  
  </div>

Spinner Buttons

เราสามารถกำหนด Spinner ให้แสดงบนปุ่มได้เช่นกัน โดยการวาง spinner ไว้ภายในปุ่ม ดังนี้

<div class="container mt-5">
    <h2>การใช้งาน Bootstrap 5</h2>
    <p>ตกแต่งปุ่มกดสวยๆด้วย Bootstrap 5</p>
    <button class="btn btn-primary">
      <span class="spinner-border spinner-border-sm"></span>
    </button>
    
    <button class="btn btn-primary">
      <span class="spinner-border spinner-border-sm"></span>
      กำลังโหลด..
    </button>
    
    <button class="btn btn-primary" disabled>
      <span class="spinner-border spinner-border-sm"></span>
      กำลังทำงาน..
    </button>
    
    <button class="btn btn-primary" disabled>
      <span class="spinner-grow spinner-grow-sm"></span>
      กำลังประมวลผล..
    </button> 
  </div>