Bootstrap 4 Button ทำงานกับปุ่มกด

ใน Bootstrap 4 มีการออกแบบ Button ให้สามารถใช้งานได้หลายรูปแบบ เพื่อให้เหมาะสมกับความต้องการในแต่ละสถานการณ์ ไม่ว่าจะเป็นการเพิ่มปุ่มที่มีสไตล์สีแตกต่างกัน ขนาดต่างๆ รวมไปถึงการทำปุ่มให้มีสถานะต่างๆ เช่น ปุ่มที่ถูกปิดการใช้งานหรือปุ่มที่ทำหน้าที่เป็นลิงก์

รูปแบบพื้นฐานของปุ่ม (Basic Buttons)

ใน Bootstrap 4 การสร้างปุ่มสามารถทำได้ง่ายโดยใช้คลาส .btn ร่วมกับคลาสที่กำหนดสีของปุ่ม

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

ในตัวอย่างนี้ btn-primary จะเป็นปุ่มสีน้ำเงิน, btn-success จะเป็นปุ่มสีเขียว, btn-danger จะเป็นปุ่มสีแดง และอื่นๆ

ปุ่มขอบ (Outline Buttons)

หากต้องการปุ่มที่มีลักษณะโปร่งแสงและมีขอบ เราสามารถใช้คลาส .btn-outline-* ได้ ซึ่งจะเปลี่ยนปุ่มให้มีขอบสีและพื้นหลังโปร่งแสง

<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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

ในตัวอย่างนี้ ปุ่มจะมีลักษณะของขอบสีที่ต่างกันตามประเภทปุ่ม แต่พื้นหลังจะเป็นสีใส

ขนาดของปุ่ม (Button Sizes)

หากต้องการปรับขนาดของปุ่ม สามารถใช้คลาส .btn-lg หรือ .btn-sm เพื่อปรับขนาดปุ่มให้ใหญ่ขึ้นหรือเล็กลง

<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-secondary btn-sm">Small Button</button>

ในตัวอย่างนี้จะมีปุ่มขนาดใหญ่และปุ่มขนาดเล็กที่ถูกปรับให้เหมาะสมกับพื้นที่หรือดีไซน์ของหน้าเว็บ

ปุ่มลิงก์ (Button Links)

เราสามารถใช้ปุ่มเป็นลิงก์ได้โดยใช้แท็ก <a> แทน <button> และเพิ่มคลาส btn ให้กับแท็ก <a>

<a href="#" class="btn btn-primary">Link Button</a>
<a href="#" class="btn btn-secondary">Link Button</a>

ในตัวอย่างนี้ ปุ่มจะถูกใช้เป็นลิงก์ที่สามารถคลิกเพื่อไปยัง URL ที่กำหนด

ปุ่มที่ถูกปิดการใช้งาน (Disabled Button)

หากต้องการปิดการใช้งานปุ่มสามารถเพิ่ม disabled attribute ใน <button> หรือใช้คลาส .disabled สำหรับ <a>

<button type="button" class="btn btn-primary" disabled>Disabled Button</button>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Disabled Link</a>

ในตัวอย่างนี้ปุ่มจะไม่สามารถคลิกหรือทำงานได้ และยังมีการเพิ่มคุณสมบัติการเข้าถึง (accessibility) ผ่าน aria-disabled="true"

ปุ่มที่เป็น Block (Block-Level Button)

หากต้องการให้ปุ่มแสดงผลเต็มความกว้างของพื้นที่บรรจุ สามารถใช้คลาส .btn-block ได้

<button type="button" class="btn btn-primary btn-block">Block Level Button</button>
<button type="button" class="btn btn-secondary btn-block">Block Level Button</button>

ในตัวอย่างนี้ปุ่มจะขยายเต็มความกว้างของบรรทัดที่อยู่ใน container

ปุ่มที่มีสถานะการกด (Active Buttons)

เราสามารถสร้างปุ่มที่มีสถานะ active เพื่อแสดงว่าปุ่มถูกกดอยู่ได้โดยใช้คลาส .active

<button type="button" class="btn btn-primary active">Active Button</button>
<a href="#" class="btn btn-secondary active" role="button" aria-pressed="true">Active Link</a>

ในตัวอย่างนี้ ปุ่มจะมีลักษณะว่าอยู่ในสถานะการกดหรือเปิดใช้งาน

ปุ่มกลุ่ม (Button Group)

เราสามารถจัดปุ่มหลายๆ ปุ่มให้อยู่ในกลุ่มเดียวกันได้โดยใช้คลาส .btn-group

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

ในตัวอย่างนี้ ปุ่มจะถูกจัดให้อยู่ในแถวเดียวกันเหมือนเป็นกลุ่มเดียวกัน

สรุป

การใช้งาน Button ใน Bootstrap 4 มีหลากหลายรูปแบบให้เลือกใช้งานตามความเหมาะสม ไม่ว่าจะเป็นปุ่มสี ปุ่มขอบ ขนาดต่างๆ หรือปุ่มที่มีสถานะการทำงาน การใช้งานปุ่มอย่างมีประสิทธิภาพจะช่วยเพิ่มความสามารถในการออกแบบหน้าเว็บให้มีความสวยงามและตอบสนองต่อผู้ใช้ได้อย่างดี