
ตกแต่งปุ่มกด 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>

- Bootstrap 5 Get Started
- Bootstrap 5 Container
- Bootstrap 5 Grid Basic
- Bootstrap 5 Typography
- Bootstrap 5 Colors
- Bootstrap 5 Tables
- Bootstrap 5 Images
- Bootstrap 5 Jambotron
- Bootstrap 5 Alerts
- Bootstrap 5 สร้างปุ่มกดสวย ๆ
- Bootstrap 5 การจัดกลุ่มให้ปุ่มกด
- Bootstrap 5 การสร้าง Badge
- Bootstrap 5 การสร้าง Progress Bar
- Bootstrap 5 การสร้าง Spinner
- Bootstrap 5 กับการแบ่งหน้า
- Bootstrap 5 การสร้าง List Groups
- Bootstrap 5 การใช้งาน Card
- Bootstrap 5 การสร้าง Dropdown Menu
- Bootstrap 5 Collapse
- Bootstrap 5 Navs
- Bootstrap 5 Navbars
- Bootstrap 5 Carousel
- Bootstrap 5 Modal
- Bootstrap 5 Tooltip
- Bootstrap 5 Popover
- Bootstrap 5 Toasts
- Bootstrap 5 Scrollspy
- Bootstrap 5 Offcanvas
- Bootstrap 5 Utilities
- Bootstrap 5 Flex
- Bootstrap 5 Forms
- Bootstrap 5 Select
- Bootstrap 5 Checkboxes and Radio buttons
- Bootstrap 5 Range
- Bootstrap 5 Input Groups
- Bootstrap 5 Form Floating Labels
- Bootstrap 5 Form Validation
- Bootstrap 5 Grid System
- Bootstrap 5 Grid Stacked to horizontal
- Bootstrap 5 Grid Extra Small
- Bootstrap 5 Grid Small
- Bootstrap 5 Grid Medium
- Bootstrap 5 Grid Large
- Bootstrap 5 Grid Extra Large
- Bootstrap 5 Grid XXL
- Bootstrap 5 Grid Examples