در این آموزش یک لینک ساده را با CSS به دکمه‌ای قابل استفاده تبدیل می‌کنیم و همزمان به نکاتی می‌پردازیم که در پروژه واقعی مهم‌اند: اندازه مناسب ناحیه کلیک، Contrast، حالت Hover، Focus قابل مشاهده و رفتار مناسب روی Keyboard و Touch.
ساختار HTML دکمه
اگر عنصر قرار است کاربر را به صفحه دیگری ببرد، استفاده از لینک <a> انتخاب مناسبی است. اگر قرار است عملی داخل صفحه انجام دهد، مثل باز کردن Dialog یا Submit کردن فرم، معمولا عنصر <button> معنای درست‌تری دارد. ظاهر هر دو را می‌توان با CSS شبیه دکمه کرد، اما Semantic HTML را نباید فدای ظاهر کرد.
ویژگی‌های اصلی CSS برای دکمه
- display: برای کنترل Box و Alignment.
- padding: برای ایجاد فضای کلیک مناسب اطراف Label.
- background-color: رنگ پس‌زمینه دکمه.
- color: رنگ متن با Contrast مناسب.
- border / border-radius: کنترل حاشیه و فرم گوشه‌ها.
- text-decoration: برای کنترل ظاهر لینک، بدون حذف نشانه‌های ضروری در Contextهای دیگر.
Hover و Focus چه تفاوتی دارند؟
:hover معمولا هنگام قرار گرفتن Pointer روی عنصر فعال می‌شود، اما کاربران Keyboard به :focus یا ترجیحا :focus-visible نیاز دارند تا بدانند کدام کنترل فعال است. حذف Outline بدون جایگزین قابل مشاهده یکی از خطاهای رایج Accessibility است.
نمونه CSS ساده
.button {
display: inline-block;
padding: 0.75rem 1.25rem;
border: 1px solid transparent;
border-radius: 0.5rem;
background: #222;
color: #fff;
text-decoration: none;
}
.button:hover {
background: #444;
}
.button:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}نکات Accessibility برای Button
- متن دکمه باید هدف Action را روشن کند.
- Contrast متن و پس‌زمینه را بررسی کنید.
- Focus State را حذف نکنید.
- برای Action واقعی از عنصر معنایی مناسب استفاده کنید.
- اندازه ناحیه تعامل را برای Touch بیش از حد کوچک نکنید.
مجموعه آموزش CSS
برای درک بهتر اصول رابط کاربری در کنار CSS، می‌توانید نقشه راه UI Design را هم ببینید.
