สร้างกลุ่มปุ่มแนวตั้ง (Vertical Button Group) ด้วย CSS

แนวคิดพื้นฐาน

กลุ่มปุ่มแนวตั้ง (Vertical Button Group) จัดเรียงปุ่มจากบนลงล่าง เหมาะสำหรับ Sidebar, Menu หรือ Form actions ใช้ display: block หรือ Flexbox เพื่อจัดเรียง

ตัวอย่างแบบคลาสสิก (ใช้ display: block)

<!DOCTYPE html>
<html>
<head>
  <style>
    .mybtn .button {
      background-color: orange;
      border: 1px solid green;
      width: 120px;
      color: white;
      font-size: 14px;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      display: block;           /* สำคัญ: ทำให้ปุ่มซ้อนกันแนวตั้ง */
      margin-bottom: 5px;       /* ระยะห่างระหว่างปุ่ม */
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .mybtn .button:hover {
      background-color: #e67e00;
    }
    .mybtn .button:active {
      background-color: #cc6600;
    }
  </style>
</head>
<body>
  <div class="mybtn">
    <button class="button">ผลลัพธ์ 1</button>
    <button class="button">ผลลัพธ์ 2</button>
    <button class="button">ผลลัพธ์ 3</button>
    <button class="button">ผลลัพธ์ 4</button>
  </div>
</body>
</html>

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

.btn-group-vertical {
  display: flex;
  flex-direction: column;   /* จัดเรียงแนวตั้ง */
  gap: 8px;                 /* ระยะห่างระหว่างปุ่ม */
  width: fit-content;
}

.btn-group-vertical .btn {
  width: 100%;              /* ปุ่มกว้างเท่ากันทุกตัว */
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

/* ขอบโค้งมนเฉพาะปุ่มบนและล่าง */
.btn-group-vertical .btn:first-child {
  border-radius: 8px 8px 0 0;
}
.btn-group-vertical .btn:last-child {
  border-radius: 0 0 8px 8px;
}
.btn-group-vertical .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

การใช้งานจริง: Sidebar Navigation

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 14px;
  color: #495057;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

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

คำแนะนำ

• ใช้ Flexbox แทน display: block เพื่อควบคุมระยะห่างได้ง่ายด้วย gap
• กำหนด width: 100% ให้ปุ่มทุกตัวมีขนาดเท่ากัน
• ใช้ :first-child และ :last-child สำหรับขอบโค้งมนเฉพาะปลาย
• เพิ่ม transition สำหรับเอฟเฟกต์ hover ที่นุ่มนวล