ساخت کلاس دکمه قابل استفاده دوباره در CSS؛ پایه و گونه اصلی

یک عنصر می‌تونه چند کلاس داشته باشه. این ویژگی برای ساخت اجزای قابل استفاده دوباره خیلی مفیده: یک کلاس پایه برای اندازه و شکل مشترک می‌نویسیم و کلاس دوم فقط تفاوت ظاهری یک گونه رو بیان می‌کنه. مثلاً btn می‌تونه فاصله داخلی و گردی رو بده و btn-primary رنگ دکمه اصلی رو مشخص کنه. لازم نیست همه دستورها رو برای هر دکمه کپی کنیم.

توی مثال، کلاس پایه مشترکه ولی گونه هشدار رنگ مستقل داره. فعالیت یک دکمه عادی و یک دکمه اصلی داره که باید بخش مشترک‌شون یکسان بمونه. خطای رایج تعریف همه ظاهر روی button است؛ اون قانون دکمه‌های بی‌ارتباط آینده رو هم درگیر می‌کنه و مرز جزء رو از بین می‌بره. انتخابگر .btn-primary به‌تنهایی هم نباید برای ویژگی‌های مشترک جای .btn رو بگیره. HTML آماده نشان می‌ده کدام عنصر هر دو کلاس رو گرفته. با همین ساختار، ظاهر مشترک و تفاوت رنگ رو واضح و کوتاه بنویس.

✍️ مثال حل‌شده:

<button class="action">معمولی</button><button class="action warning">حذف</button>
<style>.action { padding:6px 12px; border-radius:4px; } .warning { background-color:maroon; color:white; }</style>

حالا نوبت توئه: هر دو دکمه .btn باید padding بالا و پایین ۱۰ و راست و چپ ۱۶ پیکسل، border-radius:8px و border:0 داشته باشند. دکمه .btn-primary زمینه navy و نوشته white بگیرد؛ دکمه .btn-secondary زمینه #e2e8f0 داشته باشد. دو دکمه و کلاس‌های مشترک و گونه‌های آن‌ها را حفظ کن.