Dieser Artikel wurde ursprünglich veröffentlicht unter
https://notarena.com/

Dieser Code erstellt eine animierte Umschalttaste, die zwischen hellem und dunklem Modus wechselt, indem sie die Klasse „dunkel“ zum Körperelement hinzufügt oder entfernt. Die Umschalttaste verfügt über einen Kreis, der sanft übergeht, um den Modus anzuzeigen, und der Hintergrund des Körpers wechselt ebenfalls sanft, um ein nahtloses Erlebnis zu ermöglichen.

Ich verwende Morphismus-Effekte, die Schaltfläche und der Hintergrund haben einen schönen Übergang, der dem Kippschalter einen Hauch von Eleganz verleiht. Diese Art von Umschalttaste kann in verschiedenen Websites oder Anwendungen verwendet werden, insbesondere in solchen, die möglicherweise einen Hell- und Dunkelmodus für eine bessere Zugänglichkeit oder einfach nur eine andere Designoption für den Benutzer erfordern.

Das könnte Ihnen gefallen

• Share-Button-Animation
• Benutzerdefinierte Optionsfelder

Um eine Umschaltfläche mit HTML, CSS und JavaScript zu erstellen, müssen Sie zwei Dateien erstellen: eine HTML-Datei und eine CSS-Datei. Nachdem Sie diese Dateien erstellt haben, können Sie den bereitgestellten Code kopieren und in sie einfügen. Sie können auch den gesamten Quellcode kopieren.

Umschaltfläche in HTML, CSS und JavaScript erstellen
Erstellen Sie einen Ordner: Erstellen Sie zunächst einen Ordner für Ihr Projekt. Sie können es beliebig benennen. In diesem Ordner müssen Sie die folgenden Dateien erstellen:

index.html (für die Struktur Ihres „Create Toggle Button“)
style.css (zum Gestalten der Schaltfläche „Erstellen“)
Erstellen Sie die HTML-Datei:

Nennen Sie Ihre HTML-Datei index.html.
Erstellen Sie die CSS-Datei:

Nennen Sie Ihre CSS-Datei style.css.
Erstellen Sie die JavaScript-Datei:

Nennen Sie Ihre JavaScript-Datei script.js.