CSS से वर्टिकल बटन ग्रुप बनाएं

वर्टिकल (लंबवत) बटन ग्रुप बनाने के लिए बटन्स को display: block दें और उन्हें एक कंटेनर में रखें। प्रत्येक बटन नई लाइन पर दिखाई देगा।

उदाहरण: वर्टिकल बटन ग्रुप

<!DOCTYPE html>
<html>
<head>
  <style>
    .vertical-btn-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 200px;
    }
    .vertical-btn-group button {
      background-color: orange;
      border: 1px solid green;
      color: white;
      font-size: 14px;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s;
    }
    .vertical-btn-group button:hover {
      background-color: darkorange;
    }
  </style>
</head>
<body>
  <div class="vertical-btn-group">
    <button class="button">रिज़ल्ट 1</button>
    <button class="button">रिज़ल्ट 2</button>
    <button class="button">रिज़ल्ट 3</button>
    <button class="button">रिज़ल्ट 4</button>
  </div>
</body>
</html>

मॉडर्न दृष्टिकोण (Flexbox)

पुराने float या display: block के बजाय Flexbox का उपयोग करें:

.btn-group-vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;  /* बटन्स के बीच स्पेस */
}

हॉरिजॉन्टल ग्रुप के लिए

.btn-group-horizontal {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

बॉर्डर रेडियस टिप

ग्रुप के पहले और अंतिम बटन के लिए अलग-अलग बॉर्डर रेडियस:

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