آموزش کار با دکمه ها یا Buttons در CSS

مثال عملی با کد

دکمه ساده:

.btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #2980b9;
}

دکمه با افکت فعال (active):

.btn:active {
  transform: scale(0.95);
}

دکمه‌های واکنش‌گرا:

@media (max-width: 768px) {
  .btn {
    width: 100%;
    padding: 12px 0;
  }
}

نکات مهم و توضیحات تکمیلی

• افکت‌های hover و active باعث تجربه کاربری بهتر می‌شوند.
• استفاده از border-radius و رنگ‌ها ظاهر جذاب ایجاد می‌کند.
• در موبایل و تبلت، دکمه‌ها باید قابل لمس و واکنش‌گرا باشند.
• ترکیب transition با transform باعث ایجاد افکت نرم و زیبا می‌شود.