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

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>