Este artículo se publicó originalmente en
https://notarena.com/

Este código crea un botón de alternancia animado que cambia entre el modo claro y oscuro agregando o eliminando la clase "oscura" en el elemento del cuerpo. El botón de alternancia tiene un círculo que cambia suavemente para indicar el modo, y el fondo del cuerpo también cambia suavemente para una experiencia perfecta.

Estoy usando efectos de morfismo, el botón y el fondo tienen una hermosa transición que agrega un toque de elegancia al interruptor de palanca. Este tipo de botón de alternancia se puede utilizar en varios sitios web o aplicaciones, especialmente aquellos que pueden requerir un modo claro y oscuro para una mejor accesibilidad o simplemente una opción de diseño diferente para el usuario.

Puede que te guste esto

• Animación del botón Compartir
• Botones de radio personalizados

Para crear un botón de alternancia usando HTML, CSS y JavaScript, necesita crear dos archivos: un archivo HTML y un archivo CSS. Después de crear estos archivos, puede copiar y pegar el código proporcionado en ellos. También puedes copiar todo el código fuente.

Crear botón de alternancia en HTML CSS y JavaScript
Cree una carpeta: comience creando una carpeta para su proyecto. Puedes nombrarlo como quieras. Dentro de esta carpeta, deberá crear los siguientes archivos:

index.html (para la estructura de su botón de alternancia Crear)
style.css (para diseñar el botón de alternancia Crear)
Crear el archivo HTML:

Nombra tu archivo HTML index.html.
Crear el archivo CSS:

Nombra tu archivo CSS style.css.
Crear el archivo JavaScript:

Nombra tu archivo JavaScript script.js.