‏ساخت دکمهٔ سه‌بعدی با CSS، لایه‌به‌لایه

نویسنده با یه ادعا شروع می‌کنه: دکمه‌ها قابلیت کشندهٔ وبن. هر کار مهمی که آنلاین انجام می‌دیم از سفارش غذا تا پخش ویدیو، فشاردادن یه دکمه‌ست — ولی بیشتر این دکمه‌ها هیچ حس ملموسی ندارن. کل ترفند این آموزش هم یه چیزه: موقع تعامل کاربر، یه لایهٔ جلویی رو روی یه پس‌زمینهٔ ثابت بالا و پایین می‌بریم تا توهم سه‌بعدی‌بودن ساخته بشه.

اینکه چرا box-shadow یا border انتخاب نمی‌شه هم دلیل فنی داره: انیمیت‌کردنشون خیلی پرهزینه‌ست. در عوض transform: translate می‌تونه شتاب سخت‌افزاری بگیره. تو نسخهٔ اولیه، خود المان button رنگ تیرهٔ لبهٔ پایینی رو می‌ده و لایهٔ .front رنگ روشن‌تر رو؛ موقع :active لایهٔ جلویی پایین می‌ره ولی نه تا صفر — نویسنده ۲ پیکسل بالاتر نگهش می‌داره تا توهم سه‌بعدی همیشه سرجاش بمونه.

بخش دسترسی‌پذیری هم جدی گرفته شده. نویسنده اول با outline-offset: 4px به آوت‌لاین فوکوس کمی فاصله می‌ده، ولی چون هنوز چشم‌آزاره سراغ شبه‌کلاس :focus-visible می‌ره. سلکتوری که با :focus:not(:focus-visible) ساخته می‌شه یعنی آوت‌لاین فقط وقتی مخفی بشه که کاربر با ماوس یا لمس کلیک کرده؛ کسی که با کیبورد پیمایش می‌کنه همچنان نشانگر فوکوس رو می‌بینه.

جالب‌ترین بخش، شخصیت‌دادن به انیمیشنه. به‌جای یه transition واحد، نویسنده برای هر حالت زمان و منحنی جدا می‌ذاره: بازگشت به حالت تعادل (وقتی ماوس دور می‌شه) ۶۰۰ میلی‌ثانیه با یه منحنی cubic-bezier که در عمل یه ease-out تهاجمیه؛ حالت :active فقط ۳۴ میلی‌ثانیه، یعنی حدود دو فریم در ۶۰ فریم بر ثانیه، چون آدم‌ها دکمه رو سریع فشار می‌دن؛ و :hover یه منحنی فنری که کمی از هدف رد می‌شه و بیشترین شخصیت رو به دکمه می‌ده.

برای اضافه‌کردن سایهٔ واقعی، ساختار عوض می‌شه: button تبدیل به یه wrapper با سه لایهٔ روی هم می‌شه.

<button>
  <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front">Push Me</span>
</button>

لایه‌ها با پوزیشن absolute روی هم می‌شینن و فقط .front در جریان عادی می‌مونه تا عرض و ارتفاع دکمه رو بسازه؛ ترتیب DOM کافیه و به z-index نیازی نیست. نکتهٔ ظریفش اینه که سایه در جهت مخالف لایهٔ جلویی حرکت می‌کنه و به‌اندازهٔ اون هم جابه‌جا نمی‌شه: جلو ۶ پیکسل بالا می‌ره، سایه ۴ پیکسل پایین. یه filter: blur(4px) هم نرم‌ترش می‌کنه.

دو تای آخر مربوط به رنگ و موبایله. روی لایهٔ .edge یه گرادیان خطی می‌شینه تا گوشه‌های گرد جوری دیده بشن که انگار نور کمتری بازمی‌تابونن. برای حالت hover هم به‌جای عوض‌کردن رنگ‌ها که با گرادیان قاطی می‌شه، از فیلتر روشنایی استفاده می‌شه:

.pushable:hover {
  transition: filter 250ms;
  filter: brightness(110%);
}

روی موبایل هم -webkit-tap-highlight-color: transparent مستطیل خاکستری لمس رو حذف می‌کنه و user-select: none جلوی انتخاب متن هنگام نگه‌داشتن انگشت روی دکمه رو می‌گیره. نویسنده اینجا تذکر می‌ده که غیرفعال‌کردن قابلیت‌های مرورگر که برای بهبود تجربه ساخته شده‌ن باید خیلی به‌ندرت و با احتیاط انجام بشه. آخرش هم صادقانه می‌گه این دکمه پرزرق‌وبرقه و باید انتخابی ازش استفاده کنی — برای بنر رضایت کوکی مناسب نیست.

نکات کلیدی:

• توهم سه‌بعدی از جابه‌جایی لایهٔ جلویی ساخته می‌شه، نه از سایه و بوردر
• transform شتاب سخت‌افزاری می‌گیره؛ box-shadow برای انیمیشن پرهزینه‌ست
• با :focus:not(:focus-visible) آوت‌لاین برای کاربر کیبورد حفظ می‌شه
• زمان و منحنی جدا برای hover و active، بیشترین شخصیت رو می‌سازه
• سایه لایهٔ سوم و جداست و در جهت مخالف حرکت می‌کنه