Button Bootstrap là gì? Cách sử dụng Button và Button Group

Trong thế giới phát triển giao diện web hiện đại, Bootstrap nổi bật như một công cụ mạnh mẽ giúp tiết kiệm thời gian và tối ưu thiết kế UI. Một trong những thành phần nổi bật của Bootstrap chính là button (nút bấm) – nơi người dùng thực hiện các hành động, tương tác với hệ thống.

Đọc bài viết này để được hướng dẫn:

• Button Bootstrap là gì? Vai trò của Button
• Các kiểu nút, kích thước, trạng thái và hiệu ứng tương tác
• Cách tạo Button Group chuyên nghiệp với khả năng mở rộng cao
• Kết hợp button với icon, dropdown, và tùy chỉnh giao diện riêng

Vai trò của Button Bootstrap trong thiết kế web

Phần tử HTML <button> là một phần tử tương tác, được người dùng kích hoạt bằng chuột, bàn phím, ngón tay, lệnh giọng nói hoặc các công nghệ hỗ trợ khác. Sau khi được kích hoạt, nó sẽ thực hiện một hành động, chẳng hạn như gửi biểu mẫu hoặc mở một hộp thoại.

Theo mặc định, các nút HTML được hiển thị với kiểu dáng giống như nền tảng mà trình duyệt đang chạy, nhưng bạn có thể thay đổi giao diện của nút bằng CSS. Thiết kế button tốt không chỉ giúp tăng trải nghiệm người dùng mà còn cải thiện hiệu suất tương tác tổng thể của hệ thống.

Hình ảnh mặc định của Button trên trình duyệt.

Tại sao nên dùng Button Bootstrap?

Bootstrap cung cấp một hệ thống class tiện ích để tạo ra các button nhất quán, dễ sử dụng, tương thích tốt với các thiết bị và trình duyệt phổ biến. Ngoài ra, việc sử dụng Button Bootstrap giúp:

• Dễ tích hợp và dự án, chỉ cần vài lớp CSS là có thể tạo được nhiều kiểu button khác nhau.
• Dễ dàng tùy chỉnh và mở rộng bằng CSS và class riêng
• Kết hợp tốt với các thành phần khác như dropdown, modals, form…

Các nhóm định dạng button trong Bootstrap

Các kiểu button trong Bootstrap

Lớp cơ bản (Base class)

Bootstrap cung cấp một lớp cơ bản .btn để thiết lập các kiểu dáng cơ bản như khoảng đệm (padding) và căn chỉnh nội dung. Mặc định, các nút sử dụng .btn có viền và nền trong suốt, và không có kiểu hiển thị rõ ràng khi focus hay hover.

   <button type="button" class="btn">Base class</button>

Lớp .btn được thiết kế để kết hợp với các biến thể của button trong Bootstrap, hoặc để làm nền tảng cho các kiểu tùy chỉnh khác.

Các biến thể (Variants)

Bootstrap bao gồm nhiều biến thể của nút (button variants), mỗi loại phục vụ một mục đích ngữ nghĩa riêng biệt, cùng với một số kiểu bổ sung để kiểm soát hiển thị tốt hơn:

Biến thể của nút	Ý nghĩa
btn-primary	Dùng cho các hành động chính trong trang web (nút “Đăng ký”, “Gửi”,…)
btn-secondary	Hành động phụ, ít quan trọng hơn primary (nút “Hủy”, “Đóng”,…)
btn-success	Thể hiện hành động thành công, xác nhận đã hoàn tất (nút “Hoàn tất”,..)
btn-danger	Dùng cho hành động nguy hiểm, không thể hoàn tác (nút “Xóa”, “Hủy đơn hàng”,…)
btn-warning	Cảnh báo người dùng trước khi thực hiện hành động có thể rủi ro (nút “Thử lại”, “Gửi lại OTP”, …)
btn-info	Cung cấp thông tin hoặc hành động phụ trợ không nguy hiểm (nút “Xem chi tiết”, “Tìm hiểu thêm”, “Hướng dẫn”,…)
btn-light	Sử dụng trong giao diện nhẹ nhàng, thường cho giao diện nền tối hoặc cần sự tối giản
btn-dark	Dùng với nền sáng hoặc khi cần sự tương phản mạnh
btn-link	Nhìn giống liên kết văn bản, sử dụng cho điều hướng hoặc thao tác phụ đơn giản (“Xem thêm”, “Quên mật khẩu?”, “Chuyển tới trang chủ”,…)

Ví dụ sử dụng:

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

   <button type="button" class="btn btn-link">Link</button>

Kết quả hiển thị:

Định dạng kích thước và độ rộng

Bạn có thể thay đổi kích thước button bằng các class .btn-lg, .btn-sm:

  <button type="button" class="btn btn-primary btn-lg">Large button</button>

  <button type="button" class="btn btn-secondary btn-lg">Large button</button>

Kết quả hiển thị:

<button type="button" class="btn btn-primary btn-sm">Small button</button>

<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Kết quả hiển thị:

Ngoài ra, để tạo button chiếm toàn bộ chiều rộng cha, bạn có thể kết hợp với .w-100 (điều này sẽ định dạng button luôn có chiều rộng bằng 100%):

<button class="btn btn-primary w-100">Full Width Button</button>

Outline Button

Nếu bạn cần một button có điểm nhấn, nhưng không muốn có màu nền đậm, bạn có thể sử dụng button viền (outline) với nhóm class có dạng .btn-outline-* để giúp thiết kế trở nên tối giản và nhẹ nhàng hơn:

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

Kết quả hiển thị:

Lưu ý: Một số kiểu button trong Bootstrap sử dụng màu chữ (foreground color) khá sáng, vì vậy chỉ nên sử dụng chúng trên nền tối để đảm bảo độ tương phản đủ cao, giúp người dùng dễ đọc và tuân thủ tiêu chuẩn về khả năng truy cập (accessibility). Dưới đây là một kiểu button cần đặc biệt lưu ý:

Loại Button	Đặc điểm	Lưu ý
btn-warning	Màu chữ gần như đen nhưng nền vàng sáng	Trên nền trắng dễ mờ nhạt, không đủ tương phản, chỉ nên dùng trên nền trung tính hoặc tối.
btn-light	Nền rất sáng nhưng màu chữ chỉ hiển thị tối khi đưa chuột vào	Trên nền trắng hoặc sáng sẽ rất khó phân biệt.
btn-link	Chữ xanh không màu nền	Dễ không thấy nếu đặt trên nền xanh nhạt.
btn-secondary, btn-dark	Nền tối (xám đen) và chữ trắng	Tránh dùng trên nền xám tương tự hoặc nền tối

Button tags

Mặc định, các class .btn trong Bootstrap được thiết kế để hoạt động tốt nhất với phần tử <button>. Tuy nhiên, bạn hoàn toàn có thể áp dụng chúng cho các phần tử khác như <a> hoặc <input> để tạo ra các nút có giao diện tương tự.

<!-- Sử dụng .btn với thẻ a -->
<a class="btn btn-primary" href="#" role="button">Link</a>

<!-- Sử dụng .btn với button -->
<button class="btn btn-primary" type="submit">Button</button>

<!-- Sử dụng .btn với input -->
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Kết quả hiển thị:

Lưu ý: Nếu bạn dùng <a> với class .btn để kích hoạt một chức năng JavaScript trong trang (ví dụ: mở modal, collapse, scroll, v.v.), thì nên thêm thuộc tính role=”button” để đảm bảo công cụ hỗ trợ (screen reader) hiểu đây là một nút bấm, chứ không phải một liên kết điều hướng.

State và interaction của Button

Đối với các loại Button, Bootstrap đều có hỗ trợ trạng thái disabled cho button để ngăn người dùng tương tác với nút bấm khi cần thiết (ví dụ như khi chưa điền đủ thông tin form hoặc đang chờ xử lý). Những button bị disabled sẽ có định dạng riêng biệt để dễ dàng nhận biết.

Đối với button

<button type="button" class="btn btn-primary" disabled>Primary button</button>

<button type="button" class="btn btn-secondary" disabled>Button</button>

<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>

<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

Kết quả hiển thị:

Đối với thẻ <a>

Các nút bị vô hiệu hóa sử dụng phần tử <a> có hành vi hơi khác một chút:

• Thẻ <a> không hỗ trợ thuộc tính disabled, vì vậy bạn phải thêm class .disabled để khiến nó hiển thị như bị vô hiệu hóa
• Các nút bị vô hiệu hóa sử dụng <a> nên bao gồm thuộc tính aria-disabled=”true” để thông báo trạng thái của phần tử này cho các công nghệ hỗ trợ
• Các nút bị vô hiệu hóa sử dụng <a> không nên bao gồm thuộc tính href

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>

<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Kết quả hiển thị:

Kết hợp button và icon

Để tăng khả năng tiếp cận, bạn có thể dễ dàng kết hợp button với icon (ví dụ dùng Font Awesome hoặc Bootstrap Icons).

   <button class="btn btn-primary">

     <i class="bi bi-download"></i> Download

   </button>

Kết quả hiển thị:

Hoặc button chỉ có icon:

   <button class="btn btn-outline-secondary">

     <i class="bi bi-gear"></i>

   </button>

Kết quả hiển thị:

Đọc thêm: Bootstrap Icon: Cách cài đặt và sử dụng hiệu quả trong dự án web

Button Group trong Bootstrap là gì?

Button Group (nhóm nút) là một cách để gom một loạt các nút lại với nhau trên một dòng hoặc xếp chúng theo cột dọc. Button Group mang đến một số tác dụng như:

• Giao diện trở nên gọn gàng hơn, giảm không gian trắng giữa các nút
• Giúp trang web trực quan hơn, người dùng dễ hiểu rằng các nút này có mối liên hệ với nhau
• Tăng tính nhất quán của trang web, đảm bảo mọi nhóm hành động được hiển thị theo cùng một cách

Để tạo một nhóm nút cơ bản, bạn cần bọc một chuỗi các button có class .btn bên trong một thẻ <div> có class .btn-group.

Lưu ý:

• Button Groups cần có thuộc tính role phù hợp và nhãn rõ ràng để đảm bảo các công nghệ hỗ trợ như trình đọc màn hình nhận diện các nút này là một nhóm và thông báo chính xác.
• Sử dụng role=”group” cho các nhóm nút thông thường hoặc role=”toolbar” cho các thanh công cụ. Sau đó, sử dụng thuộc tính aria-label hoặc aria-labelledby để đặt nhãn cho nhóm nút đó.

Các định dạng Button Group trong Bootstrap

Nhóm button

Gom nhóm các button có class .btn, những button nằm ngoài sẽ được bo góc:

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

Kết quả hiển thị:

Bạn có thể kết hợp nhiều loại Button trong cùng một group:

<div class="btn-group" role="group" aria-label="Basic mixed styles example">

   <button type="button" class="btn btn-danger">Left</button>

   <button type="button" class="btn btn-warning">Middle</button>

   <button type="button" class="btn btn-success">Right</button>

</div>

Kết quả hiển thị:

Hoặc sử dụng outline button:

   <div class="btn-group" role="group" aria-label="Basic outlined example">

     <button type="button" class="btn btn-outline-primary">Left</button>

     <button type="button" class="btn btn-outline-primary">Middle</button>

     <button type="button" class="btn btn-outline-primary">Right</button>

   </div>

Kết quả hiển thị:

Nhóm liên kết

Các thẻ <a> chứa định dạng button Bootstrap cũng có thể được gom nhóm, chúng thường được sử dụng như một thanh menu ở phần header:

   <div class="btn-group">

   <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>

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

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

   </div>

Kết quả hiển thị:

Nhóm checkbox và radio

Khi muốn người dùng chọn nhiều hoặc một tuỳ chọn, nhưng với giao diện dạng button (thay vì checkbox/radio truyền thống), bạn có thể sử dụng input với định dạng button và gom nhóm bằng button group:

Checkbox (chọn nhiều lựa chọn)

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Kết quả hiển thị:

Radio (chỉ được chọn 1 lựa chọn)

   <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
     <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
     <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
  
     <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
     <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
  
     <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
     <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
   </div>

Kết quả hiển thị:

Kết hợp Button Group với Dropdown

Ngoài việc kết hợp nhiều button hoặc nhiều thẻ <a> vào một nhóm, Bootstrap còn cho phép bạn gộp dropdown và các nút bình thường trong cùng một nhóm. Điều này rất hữu ích để tạo các thanh công cụ đa chức năng.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>
  
  <div class="btn-group" role="group">
     <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
     </button>
     <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
     </ul>
  </div>
</div>

Kết quả hiển thị:

Tùy chỉnh định dạng riêng cho Button và Button Group trong Bootstrap

Bootstrap đã cung cấp sẵn hệ thống các định dạng cho Button, giúp bạn có thể dễ dàng áp dụng vào dự án. Trong trường hợp bạn muốn thay đổi một số định dạng riêng cho các button và button group, bạn có thể sử dụng các cách sau:

Viết CSS tùy chỉnh

Bạn có thể viết CSS tuỳ biến theo nhu cầu và ghi đè lên các thuộc tính mà Bootstrap định nghĩa từ trước. Ví dụ:

.custom-btn {

  background-color: #4a148c;

  color: #fff;

  border-radius: 50px;

}

Trong file HTML:

     <button class="btn custom-btn">Nút đặc biệt</button>

Kết quả hiển thị:

Sử dụng Sass

Nếu bạn đang sử dụng Bootstrap thông qua bản source Sass, bạn có thể tự mở rộng thêm các tiện ích border trong quá trình build. Thay vì chỉnh trực tiếp class CSS, bạn có thể ghi đè biến SASS để cấu hình lại giao diện button theo hệ thống của riêng bạn.

// Custom Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";   // Biến gốc
@import "bootstrap/mixins";

// Ghi đè biến ở đây
$btn-padding-y: 0.75rem;
$btn-padding-x: 2rem;
$btn-border-radius: 50px;

Kết quả, tất cả các button sẽ có padding rộng hơn, bo tròn kiểu viên thuốc (pill). 

Khi nào nên sử dụng Button và Button Group trong Bootstrap

Khi nào nên sử dụng Button Bootstrap?

Sử dụng button khi bạn cần thực hiện hành động đơn lẻ, cụ thể, và không phụ thuộc vào các hành động khác xung quanh nó. Trường hợp cụ thể nên dùng:

• Gửi form
• Kêu gọi hành động: Nút “Thích”, “Lưu”, “Theo dõi”,…
• Điều hướng trang
• CTA (Call to Action): “Đăng ký ngay”, “Tìm hiểu thêm”,…

Khi nào nên sử dụng Nhóm Button Bootstrap?

Button Group nên được dùng khi có nhiều nút liên quan về mặt ngữ nghĩa hoặc chức năng, và bạn muốn gom chúng lại để thể hiện mối quan hệ đó. Trường hợp cụ thể nên dùng:

• Các lựa chọn thuộc cùng một nhóm
• Các thao tác CRUD: Thêm, xóa, sửa
• Bộ lọc trạng thái: “Tất cả”, “Đang xử lý”, “Hoàn tất”
• Sử dụng kết hợp với Dropdown

Câu hỏi thường gặp về Button Bootstrap

Có nhất thiết phải dùng thẻ <button> để tạo nút không?

Bạn không nhất thiết phải dùng <button> để tạo nút, bên cạnh đó bạn có thể dùng <a>, <input>, hoặc bất kỳ thẻ nào, miễn là bạn thêm class btn. Tuy nhiên, nên chọn đúng thẻ theo ngữ nghĩa (semantic) để cải thiệt trải nghiệm người dùng, khả năng truy cập (accessibility), SEO, và hiệu suất trang web.

Tạo nút bằng thẻ <a>

   <div class="btn-group">

   <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>

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

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

   </div>

Tạo nút bằng thẻ <span>

<span class="btn btn-primary" onclick="submitForm()">Gửi</span>

Làm sao để thay đổi màu sắc button Bootstrap?

Bạn có thể sử dụng các class quy định màu sắc theo theme định nghĩa sẵn của bootstrap như btn-danger, btn-success, btn-warning,… Hoặc viết css riêng, ví dụ:

.btn-custom {
 background-color: #e91e63;
 color: white;
}

Button disabled và button inactive khác gì nhau?

Sự khác nhau giữa button disabled và button inactive nằm ở mục đích sử dụng và cách trình duyệt xử lý chúng:

	Disabled	Inactive
Khả năng tương tác	Không có	Có (nếu không xử lý chặn)
Trình duyệt hỗ trợ mặc định	Có	Không
Trình đọc màn hình	Hiểu là bị vô hiệu	Có thể hiểu là dùng được
Cách dùng	Dùng thuộc tính disabled hoặc class .disabled	Thêm class + CSS/JS tùy chỉnh

Tổng kết

Các thành phần button và button group trong Bootstrap là công cụ thiết yếu giúp lập trình viên xây dựng giao diện rõ ràng, nhất quán và dễ tương tác. Nhờ khả năng tuỳ biến linh hoạt cùng hệ thống class tiện lợi, chúng phù hợp với mọi loại dự án từ đơn giản đến phức tạp. Qua bài viết này, ITviec hi vọng bạn đã nắm được cách sử dụng và tuỳ chỉnh button trong Bootstrap để áp dụng hiệu quả vào giao diện web của mình.