چگونه ایجاد شود: مجموعه دکمه عمودی

آموزش نحوه استفاده از CSS برای ایجاد مجموعه دکمه عمودی.

چگونه یک مجموعه دکمه عمودی ایجاد کنیم

مرحله اول - اضافه کردن HTML:

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

مرحله دوم - اضافه کردن CSS:

.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