Tạo nhóm nút bấm ngang (Button Group) với CSS

Nhóm nút bấm ngang thường dùng cho toolbar, pagination, filter tabs. Sử dụng Flexbox để dễ dàng căn chỉnh, khoảng cách và responsive.

Ví dụ cơ bản (Float - cũ)

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      color: #333;
      background-color: #e67e22;
      width: 120px;
      text-align: center;
      font-size: 15px;
      padding: 12px;
      float: left;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn:hover { background-color: #d35400; color: white; }
    .mybtn { background-color: #e67e22; overflow: hidden; }
    .mybtn::after { content: ""; display: table; clear: both; }
  </style>
</head>
<body>
  <h2>Kết quả</h2>
  <p>Click below for result:</p>
  <div class="mybtn">
    <button class="btn">Kết quả</button>
    <button class="btn">Kết quả</button>
    <button class="btn">Kết quả</button>
    <button class="btn">Kết quả</button>
    <button class="btn">Kết quả</button>
  </div>
</body>
</html>

Cách hiện đại: Flexbox (Khuyên dùng)

.btn-group {
  display: flex;
  gap: 0; /* Bo góc liền mạch */
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.btn-group .btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: #f8f9fa;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-right: 1px solid #ddd;
}
.btn-group .btn:last-child { border-right: none; }
.btn-group .btn:hover { background: #e9ecef; }
.btn-group .btn.active { background: #3498db; color: white; }

Bo góc liền mạch (Connected buttons)

.btn-group {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #dee2e6;
}
.btn-group .btn {
  border-radius: 0;
  border-right: 1px solid #dee2e6;
}
.btn-group .btn:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.btn-group .btn:last-child { border-right: none; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

Responsive: Ngang desktop, dọc mobile

.btn-group-responsive {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 576px) {
  .btn-group-responsive {
    flex-direction: row;
  }
  .btn-group-responsive .btn {
    flex: 1;
  }
}

Accessibility

• Dùng role="group" và aria-label cho container
• aria-pressed="true" cho toggle buttons
• Focus visible rõ ràng cho keyboard navigation