यह लेख मूल रूप से
पर प्रकाशित हुआ था https://notarena.com/

यह कोड एक एनिमेटेड टॉगल बटन बनाता है जो बॉडी एलिमेंट पर 'डार्क' क्लास को जोड़कर या हटाकर लाइट और डार्क मोड के बीच स्विच करता है। टॉगल बटन में एक सर्कल होता है जो मोड को इंगित करने के लिए आसानी से परिवर्तित होता है, और निर्बाध अनुभव के लिए बॉडी की पृष्ठभूमि भी आसानी से परिवर्तित होती है।

मैं रूपवाद प्रभावों का उपयोग कर रहा हूं, बटन और पृष्ठभूमि में एक सुंदर संक्रमण है जो टॉगल स्विच में सुंदरता का स्पर्श जोड़ता है। इस प्रकार के टॉगल बटन का उपयोग विभिन्न वेबसाइटों या अनुप्रयोगों में किया जा सकता है, विशेष रूप से उन वेबसाइटों में जिन्हें बेहतर पहुंच के लिए प्रकाश और अंधेरे मोड या उपयोगकर्ता के लिए बस एक अलग डिज़ाइन विकल्प की आवश्यकता हो सकती है।

आपको यह पसंद आ सकता है

• शेयर बटन एनीमेशन
• कस्टम रेडियो बटन

HTML, CSS और JavaScript का उपयोग करके टॉगल बटन बनाने के लिए, आपको दो फ़ाइलें बनानी होंगी: एक HTML फ़ाइल और एक CSS फ़ाइल। इन फ़ाइलों को बनाने के बाद, आप दिए गए कोड को कॉपी और पेस्ट कर सकते हैं। आप सभी स्रोत कोड की प्रतिलिपि भी बना सकते हैं।

एचटीएमएल सीएसएस और जावास्क्रिप्ट में टॉगल बटन बनाएं
एक फ़ोल्डर बनाएँ: अपने प्रोजेक्ट के लिए एक फ़ोल्डर बनाकर शुरुआत करें। आप इसे अपनी पसंद का कोई भी नाम दे सकते हैं। इस फ़ोल्डर के अंदर, आपको निम्नलिखित फ़ाइलें बनानी होंगी:

index.html (आपके क्रिएट टॉगल बटन की संरचना के लिए)
style.css (टॉगल बटन बनाएं को स्टाइल करने के लिए)
HTML फ़ाइल बनाएं:

अपनी HTML फ़ाइल को नाम दें Index.html.
सीएसएस फ़ाइल बनाएं:

अपनी सीएसएस फ़ाइल को style.css नाम दें।
जावास्क्रिप्ट फ़ाइल बनाएं:

अपनी जावास्क्रिप्ट फ़ाइल को स्क्रिप्ट.जेएस नाम दें।