ساخت دکمه Toggle با CSS

دکمه‌های Toggle (سوییچ) در رابط‌های کاربری برای روشن/خاموش کردن تنظیمات یا تغییر وضعیت‌ها کاربرد زیادی دارند. در این مقاله به صورت گام‌به‌گام، از یک نمونه ساده CSS-only تا نسخهٔ قابل دسترس و بهینه شده همراه با متغیرهای سفارشی‌سازی و نکات عملکردی توضیح می‌دهیم.

چرا از Toggle با CSS استفاده کنیم؟

دکمه‌های CSS-only سریع، کم‌حجم و بدون وابستگی به جاوااسکریپت هستند. با استفاده از input[type=”checkbox”] و label می‌توان تعامل استاندارد مرورگر (از جمله دسترسی صفحه‌کلید و خوانندگان صفحه) را حفظ کرد. همچنین با استفادهٔ متغیرهای CSS، تغییر سایز و رنگ به سادگی ممکن می‌شود.

نمونهٔ پایه: Toggle ساده فقط با HTML/CSS

<label class="toggle">
  <input type="checkbox" aria-label="Toggle setting">
  <span class="track">
    <span class="thumb"></span>
  </span>
</label>

/* CSS */.toggle{
  --width:50px;
  --height:28px;
  --thumb:22px;
  display:inline-block;
  position:relative;
}
.toggle input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.track{
  display:inline-block;
  width:var(--width);
  height:var(--height);
  background:#d1d5db; /* gray-300 */  border-radius:999px;
  position:relative;
  transition:background .22s;
}
.thumb{
  position:absolute;
  top:50%;
  left:3px;
  width:var(--thumb);
  height:var(--thumb);
  background:#fff;
  border-radius:50%;
  transform:translateY(-50%);
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  transition:transform .22s;
}
/* Checked state */.toggle input:checked + .track{
  background:#34d399; /* green-400 */}
.toggle input:checked + .track .thumb{
  transform:translate(calc(var(--width) - var(--thumb) - 6px), -50%);
}
/* Focus */.toggle input:focus-visible + .track{
  box-shadow:0 0 0 4px rgba(59,130,246,.18);
}
/* Reduced motion */@media (prefers-reduced-motion: reduce){
  .track, .thumb{ transition:none; }
}

این قطعه یک سوییچ ساده ایجاد می‌کند: input مخفی می‌شود و label/track نمای ظاهری را نمایش می‌دهد. تغییر وضعیت بر اساس :checked انجام می‌شود و حرکت دکمه با transform انجام شده تا از reflow جلوگیری شود.

بهبود دسترسی و قابلیت استفاده

<label class="toggle">
  <input type="checkbox" aria-label="Enable notifications" id="notif-toggle">
  <span class="track">
    <span class="thumb"></span>
  </span>
</label>

<!-- Visually hidden label alternative -->
<span id="notif-desc" class="sr-only">Enable notifications</span>

/* CSS for .sr-only */.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

در این نسخه از aria-label و کلاس .sr-only برای در دسترس بودن بهتر استفاده شده است. ورودی checkbox توسط صفحه‌خوان خوانده می‌شود و با فشردن space یا کلیک قابل تغییر است. استفاده از :focus-visible باعث می‌شود زمانی که کاربر با کیبورد حرکت می‌کند شاهد حلقهٔ فوکوس مناسب باشد.

متغیرها و سفارشی‌سازی (جدول)

با تغییر متغیرها می‌توانید اندازه و رنگ را بدون نوشتن مجدد CSS تغییر دهید. این روش برای طراحی‌های سیستماتیک و تم‌ها بسیار مناسب است.

موارد استفاده و کاربردها

• تنظیمات کاربر مانند دریافت اطلاع‌رسانی، حالت تیره/روشن یا فعال/غیرفعال ویژگی‌ها.
• کنترل حالت‌های بلادرنگ در داشبوردها یا فرم‌های ساده.
• جایگزین زیباتر برای checkboxهای طولانی در فرم‌ها و پنل‌ها.

نکات فنی و توصیه‌های حرفه‌ای

برای عملکرد بهتر و رندر روان تر:

• از transform برای جابجایی thumb استفاده کنید تا از layout و paint اضافی جلوگیری شود.
• در صورت استفاده از انیمیشن، transition کوتاه و ساده باشد؛ و به ترجیح کاربر برای کاهش حرکت احترام بگذارید (prefers-reduced-motion).
• کلیدهای کیبورد (space برای checkbox) به صورت پیش‌فرض کار می‌کنند؛ پس از input[type=”checkbox”] استفاده کنید تا accessibility حفظ شود.
• در صورت نیاز به اعلام وضعیت به API یا ذخیرهٔ تنظیمات، از JS برای گوش دادن به رویداد change استفاده کنید؛ ولی نمایش می‌تواند با CSS انجام شود.

نمونهٔ بهینه‌شده با توضیحات کوتاه

<!-- HTML -->
<label class="toggle">
  <input type="checkbox" aria-label="Dark mode" id="dark-toggle">
  <span class="track"><span class="thumb"></span></span>
</label>

/* CSS (کلید: استفاده از transform و متغیرها) */.toggle{ --width:60px; --height:34px; --thumb:28px; display:inline-block; position:relative; }
.toggle input{ position:absolute; opacity:0; width:0; height:0; }
.track{ width:var(--width); height:var(--height); background:#e5e7eb; border-radius:999px; transition:background .2s; position:relative; }
.thumb{ position:absolute; left:3px; top:50%; width:var(--thumb); height:var(--thumb); transform:translateY(-50%); border-radius:50%; background:#fff; box-shadow:0 4px 8px rgba(0,0,0,.12); transition:transform .18s cubic-bezier(.4,0,.2,1); }
.toggle input:checked + .track{ background:var(--on-color, #60a5fa); }
.toggle input:checked + .track .thumb{ transform:translate(calc(var(--width) - var(--thumb) - 6px), -50%); }

در این کد، تمرکز روی روان بودن حرکت و امکان سفارشی‌سازی سریع است. همچنین با استفاده از transition مناسب و cubic-bezier، تجربهٔ بصری بهتری حاصل می‌شود.

خلاصه و جمع‌بندی

با رعایت اصول سادگی، دسترسی و بهینه‌سازی عملکرد می‌توانید سوییچ‌هایی بسازید که هم زیبا و هم قابل استفاده باشند. همیشه از input[type=”checkbox”] برای حفظ semantics و پشتیبانی از صفحه‌خوان و صفحه‌کلید استفاده کنید، از transform برای حرکت‌ها بهره ببرید و به تنظیمات prefers-reduced-motion احترام بگذارید.

اگر نیاز دارید، می‌توانم یک نسخهٔ آمادهٔ کامپوننت برای فریم‌ورک شما (React/Vue) تولید کنم یا کدی برای ذخیرهٔ وضعیت در localStorage اضافه نمایم.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال