تم نشر هذه المقالة في الأصل على
https://notarena.com/

يقوم هذا الرمز بإنشاء زر تبديل متحرك يقوم بالتبديل بين الوضع الفاتح والداكن عن طريق إضافة أو إزالة الفئة "المظلمة" على عنصر الجسم. يحتوي زر التبديل على دائرة تنتقل بسلاسة للإشارة إلى الوضع، كما تنتقل خلفية الجسم بسلاسة للحصول على تجربة سلسة.

أنا أستخدم تأثيرات الشكل، حيث يتمتع الزر والخلفية بانتقال جميل يضيف لمسة من الأناقة إلى مفتاح التبديل. يمكن استخدام هذا النوع من أزرار التبديل في مواقع الويب أو التطبيقات المختلفة، خاصة تلك التي قد تتطلب وضعًا فاتحًا ومظلمًا لتحسين إمكانية الوصول أو مجرد خيار تصميم مختلف للمستخدم.

قد يعجبك هذا

• زر المشاركة المتحرك
• أزرار الاختيار المخصصة

لإنشاء زر تبديل باستخدام HTML وCSS وJavaScript، تحتاج إلى إنشاء ملفين: ملف HTML وملف CSS واحد. بعد إنشاء هذه الملفات، يمكنك نسخ ولصق الكود المقدم فيها. يمكنك أيضًا نسخ كافة التعليمات البرمجية المصدر.

إنشاء زر تبديل في HTML CSS وJavaScript
إنشاء مجلد: ابدأ بإنشاء مجلد لمشروعك. يمكنك تسميته بأي شيء تريده. داخل هذا المجلد، ستحتاج إلى إنشاء الملفات التالية:

index.html (لبنية زر التبديل الخاص بك)
style.css (لتصميم زر التبديل لإنشاء)
قم بإنشاء ملف HTML:

قم بتسمية ملف HTML الخاص بك بـ Index.html.
قم بإنشاء ملف CSS:

قم بتسمية ملف CSS الخاص بك style.css.
قم بإنشاء ملف جافا سكريبت:

قم بتسمية ملف JavaScript script.js.