آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا

دسته : آموزش رایگان CSS

آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا

آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا

یکی از اجزای رابط کاربری مدرن، Toggle Switch یا کلید تغییر وضعیت است که معمولاً برای روشن و خاموش کردن حالت‌های مختلف در اپلیکیشن‌ها و وب‌سایت‌ها به کار می‌رود. با استفاده از CSS و HTML می‌توانید به سادگی یک Toggle Switch زیبا و کاربردی ایجاد کنید. در این مقاله، نحوه ساخت و طراحی یک Toggle Switch با استفاده از CSS و HTML به صورت گام به گام آموزش داده شده است.

 

ساختار HTML برای Toggle Switch

ابتدا نیاز به یک ساختار ساده HTML داریم که شامل یک checkbox برای کنترل وضعیت و یک label برای استایل‌دهی به آن است. از checkbox استفاده می‌کنیم زیرا به صورت داخلی وضعیت انتخاب شده (چک‌شده) یا نشده را کنترل می‌کند.



< div class="toggle-container" >
  < input type="checkbox" id="toggle" class="toggle-checkbox" >
  < label for="toggle" class="toggle-label" > < / label >
< / div >

 

در اینجا:

  • یک input از نوع checkbox برای کنترل وضعیت ایجاد کرده‌ایم.

  • یک label به عنوان دکمه برای تغییر وضعیت استایل داده‌ایم که در صورت کلیک، وضعیت checkbox تغییر می‌کند.

 

استایل‌دهی اولیه با CSS

در این مرحله، استایل‌های پایه‌ای را به عناصر اضافه می‌کنیم تا ظاهر مناسبی برای Toggle Switch ایجاد شود.



/* مخفی کردن checkbox */
.toggle-checkbox {
  display: none;
}

/* استایل‌دهی به toggle container */
.toggle-container {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 24px;
}

/* استایل‌دهی label برای نمایش toggle switch */
.toggle-label {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
}

 

در اینجا:

  • checkbox را مخفی کرده‌ایم زیرا برای کنترل Toggle Switch از label استفاده می‌کنیم.

  • toggle-container عرض و ارتفاع معین و موقعیت نسبی برای نگه‌داری کلید تعیین شده است.

  • toggle-label به عنوان کلید تغییر وضعیت طراحی شده و با رنگ پس‌زمینه و شعاع حاشیه به شکل دایره‌ای درمی‌آید.

 

ایجاد دکمه دایره‌ای برای حرکت در Toggle Switch

برای ایجاد دکمه داخلی که در داخل toggle حرکت می‌کند، از ::before استفاده می‌کنیم.



.toggle-label::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

 

در اینجا:

  • toggle-label::before دکمه داخلی را شبیه‌سازی می‌کند که به شکل یک دایره کوچک است و در موقعیت اولیه خود در سمت چپ toggle قرار می‌گیرد.

  • transform به منظور ایجاد انیمیشن برای حرکت دکمه در هنگام تغییر وضعیت اضافه شده است.

 

استایل‌دهی وضعیت فعال Toggle Switch

در این مرحله، حالت روشن (فعال) را با استفاده از انتخابگر

ایجاد می‌کنیم تا رنگ و موقعیت دکمه داخلی در صورت انتخاب‌شده تغییر کند.



.toggle-checkbox:checked + .toggle-label {
  background-color: #4caf50;
}

.toggle-checkbox:checked + .toggle-label::before {
  transform: translateX(26px);
}

 

در اینجا:

  • background-color رنگ پس‌زمینه toggle-label را هنگام فعال شدن به سبز تغییر می‌دهد.

  • transform: translateX(26px) دکمه داخلی را به سمت راست منتقل می‌کند تا نشان دهد toggle در حالت روشن است.

 

اضافه کردن انیمیشن نرم

برای زیبایی بیشتر، انیمیشن حرکت دکمه را نرم‌تر می‌کنیم تا هنگام تغییر وضعیت، یک جلوه بصری جذاب داشته باشیم.



.toggle-label {
  transition: background-color 0.3s ease;
}

.toggle-label::before {
  transition: transform 0.3s ease;
}

 

در اینجا:

  • از ease در transition استفاده کرده‌ایم تا تغییرات رنگ پس‌زمینه و حرکت دکمه نرم‌تر و روان‌تر انجام شود.

 

کد کامل CSS و HTML



< div class="toggle-container" >
  < input type="checkbox" id="toggle" class="toggle-checkbox" >
  < label for="toggle" class="toggle-label" > < / label >
< / div >

 



/* مخفی کردن checkbox */
.toggle-checkbox {
  display: none;
}

/* استایل‌دهی به toggle container */
.toggle-container {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 24px;
}

/* استایل‌دهی label برای نمایش toggle switch */
.toggle-label {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* دکمه داخلی toggle */
.toggle-label::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* استایل‌دهی برای حالت فعال toggle */
.toggle-checkbox:checked + .toggle-label {
  background-color: #4caf50;
}

.toggle-checkbox:checked + .toggle-label::before {
  transform: translateX(26px);
}

 

نکات و بهترین شیوه‌ها برای استفاده از Toggle Switch

  • تجربه کاربری: اندازه و موقعیت toggle را به گونه‌ای طراحی کنید که کاربر به راحتی بتواند از آن استفاده کند. معمولاً width حدود 50px و height حدود 24px اندازه مناسبی است.

  • نمایش وضعیت فعلی: از رنگ‌های متمایز (مانند سبز برای روشن و خاکستری برای خاموش) برای نمایش وضعیت toggle استفاده کنید تا کاربران بتوانند وضعیت فعلی را به راحتی تشخیص دهند.

  • سازگاری با مرورگرهای مختلف: مطمئن شوید که toggle شما در مرورگرهای مختلف به درستی نمایش داده می‌شود و عملکرد مشابهی دارد.

  • استفاده از transition: انیمیشن‌های نرم و سریع باعث می‌شود که تجربه کاربری بهتری برای کاربران ایجاد شود.

 

نتیجه‌گیری

با استفاده از CSS و HTML، به سادگی می‌توانید یک Toggle Switch زیبا و کاربردی ایجاد کنید. با ترکیب انتخابگرهای CSS و انیمیشن‌ها، می‌توانید تجربه‌ای جذاب برای کاربران فراهم کنید و رابط کاربری خود را حرفه‌ای‌تر کنید. طراحی Toggle Switch می‌تواند در بهبود تعاملات کاربر نقش مهمی داشته باشد و تجربه‌ای لذت‌بخش از وب‌سایت یا اپلیکیشن شما ایجاد کند.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن

معرفی React.js و بررسی مزایای آن برای توسعه وب و اپلیکیشن

28م شهریور 1402

مطالعه بیشتر

JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد

JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد

28م شهریور 1402

مطالعه بیشتر

آموزش CSS Transform و Transition: تبدیل‌ها و ایجاد تغییرات ظاهری پویا

آموزش CSS Transform و Transition: تبدیل‌ها و ایجاد تغییرات ظاهری پویا

10م شهریور 1402

مطالعه بیشتر

آموزش ارث‌بری (Inheritance) در جاوا اسکریپت: نحوه استفاده از پروتوتایپ‌ها و کلاس‌ها

آموزش ارث‌بری (Inheritance) در جاوا اسکریپت: نحوه استفاده از پروتوتایپ‌ها و کلاس‌ها

28م مهر 1403

مطالعه بیشتر

آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها

آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها

1م آبان 1403

مطالعه بیشتر

آموزش استفاده از تگ‌های تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب

آموزش استفاده از تگ‌های تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب

29م مرداد 1402

مطالعه بیشتر

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

5م شهریور 1402

مطالعه بیشتر

آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننت‌ها

آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننت‌ها

28م شهریور 1402

مطالعه بیشتر

آموزش کار با رویدادهای فرم و اعتبارسنجی فرم‌ها در جاوا اسکریپت: راهنمای جامع

آموزش کار با رویدادهای فرم و اعتبارسنجی فرم‌ها در جاوا اسکریپت: راهنمای جامع

3م آبان 1403

مطالعه بیشتر

آموزش کار با Webpack و Bundlers برای مدیریت پروژه‌ها: راهنمای جامع و کاربردی

آموزش کار با Webpack و Bundlers برای مدیریت پروژه‌ها: راهنمای جامع و کاربردی

5م آبان 1403

مطالعه بیشتر

آموزش استفاده از جدول در HTML: طراحی و استایل‌دهی جدول‌های ساده و پیشرفته

آموزش استفاده از جدول در HTML: طراحی و استایل‌دهی جدول‌های ساده و پیشرفته

21م مرداد 1402

مطالعه بیشتر

تنظیم عرض و ارتفاع عناصر در CSS: استفاده از width، height، max و min برای کنترل دقیق اندازه‌ها

تنظیم عرض و ارتفاع عناصر در CSS: استفاده از width، height، max و min برای کنترل دقیق اندازه‌ها

9م آبان 1403

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد