Este artigo foi publicado originalmente em
https://notarena.com/

Este código cria um botão de alternância animado que alterna entre os modos claro e escuro adicionando ou removendo a classe ‘escuro’ no elemento body. O botão de alternância tem um círculo que transita suavemente para indicar o modo, e o fundo do corpo também transita suavemente para uma experiência perfeita.

Estou usando efeitos de morfismo, o botão e o fundo têm uma bela transição que adiciona um toque de elegância ao botão de alternância. Este tipo de botão de alternância pode ser usado em diversos sites ou aplicativos, principalmente aqueles que podem exigir um modo claro e escuro para melhor acessibilidade ou apenas uma opção de design diferente para o usuário.

Você pode gostar disso

• Animação do botão Compartilhar
• Botões de opção personalizados

Para criar um botão de alternância usando HTML, CSS e JavaScript, você precisa criar dois arquivos: um arquivo HTML e um arquivo CSS. Depois de criar esses arquivos, você pode copiar e colar o código fornecido neles. Você também pode copiar todo o código-fonte.

Criar botão de alternância em HTML, CSS e JavaScript
Crie uma pasta: comece criando uma pasta para o seu projeto. Você pode nomeá-lo como quiser. Dentro desta pasta, você precisará criar os seguintes arquivos:

index.html (para a estrutura do seu botão de alternância Criar)
style.css (para estilizar o botão de alternância Criar)
Crie o arquivo HTML:

Nomeie seu arquivo HTML como index.html.
Crie o arquivo CSS:

Nomeie seu arquivo CSS como style.css.
Crie o arquivo JavaScript:

Nomeie seu arquivo JavaScript como script.js.