สร้างกลุ่มปุ่ม (Button Group) ด้วย CSS

Button Group คืออะไร?

กลุ่มปุ่ม (Button Group) คือการจัดกลุ่มปุ่มหลายตัวติดกัน ไม่มีช่องว่างระหว่างกัน เหมือนเป็นองค์ประกอบเดียว ใช้สำหรับ Toolbar, Pagination, Filter tabs หรือ Action groups

ตัวอย่างแบบคลาสสิก (Float)

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      color: black;
      background-color: #ff9800;
      width: 120px;
      text-align: center;
      font-size: 15px;
      padding: 12px 0;
      float: left;              /* ใช้ float จัดติดกัน */
      border: none;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .btn:first-child {
      border-radius: 4px 0 0 4px;   /* มุมซ้ายโค้งมน */
    }
    .btn:last-child {
      border-radius: 0 4px 4px 0;   /* มุมขวาโค้งมน */
      border-left: 1px solid #e68900; /* เส้นแบ่ง */
    }
    .btn:not(:first-child):not(:last-child) {
      border-radius: 0;
      border-left: 1px solid #e68900;
    }
    .btn:hover {
      background-color: #f57c00;
    }
    .mybtn {
      background-color: #ff9800;
      overflow: hidden;         /* Clearfix for floats */
      border-radius: 4px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <h2>Button Group (Float Method)</h2>
  <p>คลิกด้านล่างเพื่อดูผลลัพธ์:</p>
  <div class="mybtn">
    <button class="btn">ผลลัพธ์ 1</button>
    <button class="btn">ผลลัพธ์ 2</button>
    <button class="btn">ผลลัพธ์ 3</button>
    <button class="btn">ผลลัพธ์ 4</button>
    <button class="btn">ผลลัพธ์ 5</button>
  </div>
</body>
</html>

ตัวอย่างแบบทันสมัย (Flexbox) - แนะนำ

.btn-group {
  display: inline-flex;        /* inline-flex เพื่อไม่ให้กว้างเต็มหน้าจอ */
  border-radius: 8px;
  overflow: hidden;            /* ตัดขอบโค้งมนให้ items ภายใน */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-group .btn {
  padding: 10px 20px;
  border: none;
  background: #f5f5f5;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.btn-group .btn:first-child {
  border-radius: 8px 0 0 8px;
}

.btn-group .btn:last-child {
  border-radius: 0 8px 8px 0;
}

.btn-group .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.btn-group .btn:hover {
  background: #e0e0e0;
}

.btn-group .btn.active {
  background: #007bff;
  color: white;
}

/* Divider ระหว่างปุ่ม */
.btn-group .btn:not(:first-child) {
  border-left: 1px solid #ddd;
}

ตัวอย่าง: Toolbar แบบสมบูรณ์

.toolbar {
  display: inline-flex;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.toolbar-group {
  display: flex;
}

.toolbar-group:not(:last-child)::after {
  content: '';
  width: 1px;
  background: #e0e0e0;
  margin: 8px 0;
}

.toolbar-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-btn:hover {
  background: #f0f0f0;
}

.toolbar-btn.active {
  background: #e3f2fd;
  color: #1976d2;
}

การใช้งาน

<div class="toolbar" role="toolbar" aria-label="Text formatting">
  <div class="toolbar-group">
    <button class="toolbar-btn" aria-label="Bold"><strong>B</strong></button>
    <button class="toolbar-btn" aria-label="Italic"><em>I</em></button>
    <button class="toolbar-btn" aria-label="Underline"><u>U</u></button>
  </div>
  <div class="toolbar-group">
    <button class="toolbar-btn" aria-label="Align left">⬛⬜⬜</button>
    <button class="toolbar-btn" aria-label="Align center">⬜⬛⬜</button>
    <button class="toolbar-btn" aria-label="Align right">⬜⬜⬛</button>
  </div>
</div>

คำแนะนำ

• ใช้ display: inline-flex แทน float (ทันสมัยกว่า ไม่ต้อง clearfix)
• ใช้ overflow: hidden + border-radius บน container เพื่อมุมโค้งมนรวม
• ใช้ border-left บน items (ยกเว้นตัวแรก) สำหรับเส้นแบ่ง
• เพิ่ม white-space: nowrap ป้องกันปุ่มหักบรรทัด
• เพิ่ม aria-label และ role="toolbar" สำหรับ Accessibility