در حال بارگذاری...

دکمه در CSS

دکمه همان «انجام بده» است — بفرست، ذخیره کن، بعدی. با CSS می‌شود پوسته‌ای واضح به آن داد و وقتی کسی هاور می‌کند، فشار می‌دهد، فوکوس می‌گیرد یا دکمه غیرفعال است، بازخورد صادق نشان داد. HTML را معنادار نگه دارید (button یا submit)؛ این درس ظاهر و حالت‌هاست.

جعبهٔ ابزار دکمه

📊 دکمه‌ها یک‌نگاهه

بخش کار روزمره
padding + background + border صورت خوانا و محکم برای دکمه بسازید
border-radius گوشه‌ها را نرم کنید (یا با شعاع بزرگ کپسولی شوید)
:hover / :active بگویید «قابل کلیک است» و «الان فشرده شد»
:focus-visible حلقهٔ فوکوس صفحه‌کلید را دیدنی نگه دارید
:disabled + cursor دکمهٔ غیرفعال را ملایم کنید؛ وقتی کلیک‌پذیر است دست نشان دهید

یک .btn مشترک (یا خود button) را استایل کنید تا اکشن‌های اصلی صفحه هم‌خانواده بمانند. padding فیلدهای متنی درس قبلی بود — اینجا هدف‌های کلیک را لباس می‌پوشانیم.

دکمهٔ اصلی محکم

با padding راحت، پس‌زمینهٔ واضح، رنگ متن خوانا و border-radius آرام شروع کنید. font: inherit بگذارید تا دکمه با متن اطراف هماهنگ شود.

دکمهٔ اصلی پایه

css
CSS Code 
button,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}

hover و active — بازخورد صادق

:hover می‌تواند صورت دکمه را کمی تیره‌تر یا روشن‌تر کند. :active باید حس فشردن بدهد — یک درجه تیره‌تر یا جابه‌جایی خیلی کوچک — نه تم نئونی کاملاً جدید.

hover و active

css
CSS Code 
button:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}

button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}

فوکوسی که دیده شود

استایل فوکوس را بدون جایگزین برندارید. با :focus-visible برای کاربر صفحه‌کلید حلقهٔ واضح می‌کشید و کلیک ماوس هنوز آرام می‌ماند.

حلقهٔ فوکوس دیدنی

css
CSS Code 
button:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}

دکمهٔ disabled دیده بماند

دکمهٔ غیرفعال باید «الان نمی‌شود» به نظر برسد — opacity کمتر یا رنگ ملایم — و اشاره‌گر دست را پس بزند. از چیدمان غیبش نکنید.

ظاهر disabled

css
CSS Code 
button:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}

عادت آرام دکمه

یک پوستهٔ اصلی نگه دارید، hover و active واضح، حلقهٔ فوکوس دیدنی، و disabled ملایم. نسخهٔ outline / ghost هم همان padding و radius را بگیرد تا مجموعه هم‌خانواده بماند — نه پنج ویجت بی‌ربط.

همراه outline

css
CSS Code 
.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}

.btn-outline:hover {
color: #fff;
background: #0b5fff;
}

خودتان امتحان کنید

  1. یک button اصلی با padding، پس‌زمینه، رنگ متن و border-radius استایل کنید.
  2. :hover را کمی تیره‌تر و :active را یک درجه عمیق‌تر کنید.
  3. outline با :focus-visible بگذارید — outline: none لخت ممنوع.
  4. دکمهٔ :disabled را ملایم کنید و cursor: not-allowed بگذارید.
  5. اختیاری: یک .btn-outline هم‌خانواده با همان padding و radius بسازید.

اشتباهات رایج

  • outline: none بدون جایگزین فوکوس — کاربر صفحه‌کلید گم می‌شود
  • padding خیلی کوچک که روی موبایل انگشت جا نمی‌شود
  • این درس را تبدیل به استایل input و textarea کردن — آن کار درس کنترل فرم بود
  • تم نئونی وحشی روی :hover که آرامش برند را می‌شکند
  • فقط a را استایل کردن و فراموش کردن خودِ button

خلاصه

  • padding و پس‌زمینه و حاشیه و radius، صورت محکم دکمه را می‌سازند
  • :hover و :active بازخورد صادق تعامل می‌دهند
  • حلقهٔ :focus-visible را دیدنی نگه دارید
  • :disabled را ملایم کنید؛ وقتی کلیک‌پذیر است cursor: pointer بگذارید
  • ظاهر فیلدها درس کنترل فرم بود؛ اینجا هدف‌های کلیک را می‌پوشانیم

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 34 از 35
Css آموزش