Chave que Anoitece Plus

Sobre este efeito

Um interruptor de dia e noite. O sol atravessa o céu, a lua escorrega por cima dele, as nuvens descem e saem, as estrelas descem e entram; o botão chega ao destino um pouco antes do resto, como numa chave de verdade que assenta primeiro. Funciona no clique, no dedo, no teclado e arrastando o botão de um lado ao outro, e pode virar o tema da página inteira, por evento ou por um atributo no HTML. No teclado, Tab foca e Espaço alterna, com contorno de foco visível; arrastar alterna e o botão acompanha o dedo; a preferência de menos movimento vai direto ao estado final. Cada troca é leve. Sem JavaScript sobra uma pílula com botão que desliza e continua alternando. Tamanho, cores do céu, do sol e da lua, duração, repique e brilho das estrelas ajustáveis.

Ficha

Categoria

Botões

Onde combina

utilitário, menu/navegação

Alcance

Área: vive dentro de um bloco da página.

Plano

Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).

Peso

5,3 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 16% do processador de um celular intermediário enquanto anima.

Na loja desde

16/09/2026

Como colocar no seu site

1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-chave-que-anoitece.

Assuntos

• interruptor
• tema
• dia
• noite
• acessivel
• teclado
• controle