Cet article a été initialement publié sur
https://notarena.com/

Ce code crée un bouton bascule animé qui bascule entre les modes clair et sombre en ajoutant ou en supprimant la classe « sombre » sur l'élément body. Le bouton à bascule comporte un cercle qui évolue en douceur pour indiquer le mode, et l'arrière-plan du corps évolue également en douceur pour une expérience fluide.

J'utilise des effets de morphisme, le bouton et le fond ont une belle transition qui ajoute une touche d'élégance à l'interrupteur à bascule. Ce type de bouton bascule peut être utilisé dans divers sites Web ou applications, en particulier ceux qui peuvent nécessiter un mode clair et sombre pour une meilleure accessibilité ou simplement une option de conception différente pour l'utilisateur.

Vous pourriez aimer ça

• Animation du bouton Partager
• Boutons radio personnalisés

Pour créer un bouton bascule en utilisant HTML, CSS et JavaScript, vous devez créer deux fichiers : un fichier HTML et un fichier CSS. Après avoir créé ces fichiers, vous pouvez y copier et coller le code fourni. Vous pouvez également copier tout le code source.

Créer un bouton bascule en HTML CSS et JavaScript
Créer un dossier : commencez par créer un dossier pour votre projet. Vous pouvez le nommer comme vous le souhaitez. Dans ce dossier, vous devrez créer les fichiers suivants :

index.html (pour la structure de votre bouton Créer un bouton bascule)
style.css (pour styliser le bouton Créer un bouton bascule)
Créez le fichier HTML :

Nommez votre fichier HTML index.html.
Créez le fichier CSS :

Nommez votre fichier CSS style.css.
Créez le fichier JavaScript :

Nommez votre fichier JavaScript script.js.