کيفيت سے بننا: عمودي بٹن گروپ

کيفيت سے سی ایس ایس کا استعمال کرکے عمودي ‘بٹن گروپ’ بنائیں۔

کيفيت سے عمودي بٹن گروپ بنانا

پہلے مرحلے - ہیڈلائز اضافہ کیا گیا ہے:

<div class="btn-group">
  <button>Apple</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

دوسرے مرحلے - سی ایس ایس اضافہ کیا گیا ہے:

.btn-group button {
  background-color: #04AA6D; /* گرین پس منظر رنگ */
  border: 1px solid green; /* گرین رنگ کا فریم */
  color: white; /* وہی سبجی رنگ */
  padding: 10px 24px; /* کچھ اندرون کی پیدائش */
  cursor: pointer; /* ماوس کو فنکشن یا فنگر آئیکن */
  width: 50%; /* اگر چاہئیے تو اپنا عرض درج کیا گیا ہے */
  display: block; /* بٹن کو چڑھانے کے لئے */
}
.btn-group button:not(:last-child) {
  border-bottom: none; /* دونوں فریم کا بندابندی روکنا */
}
/* ماوس پرکشیدگی کے موقع پر پس منظر رنگ اضافہ کیا گیا ہے */
.btn-group button:hover {
  background-color: #3e8e41;
}

آپ خود کوشش کریں

مقابلہ پیج

تعلیم:CSS بٹن