Store · Loja de Efeitos
Todos os efeitos

Loja / Botões / Ícones que Anoitecem

Ícones que Anoitecem Plus

Seis botões de tema claro e escuro em que o ícone se transforma: o sol vira lua, a lâmpada apaga, o sol se põe no horizonte. Todos trocam juntos e levam a página.

Ver na loja e baixar

Sobre este efeito

Um pacote de seis botões de tema claro e escuro, cada um com o ícone se transformando na troca. No Eclipse, as duas metades dão meia volta e o aro de raios se fecha num anel. No Sol, os raios recolhem girando um atrás do outro, o disco cresce e uma sombra entra de lado até sobrar a lua crescente, e duas estrelinhas piscam ao lado. No Sol de pontos, os pontos são sugados pro centro em sequência. A Lâmpada acesa brilha cheia de cor e, ao apagar, fica só o contorno e o filamento; quando volta a acender, tremula antes de firmar. Na Lua, a coroa some, o disco inclina e aparecem as crateras. No Horizonte, o sol se põe atrás da linha e a lua nasce no lugar. As transformações terminam num balanço de mola, e um halo quente atrás do ícone vira um brilho frio de noite. Todos os botões da página são a mesma chave: clicar em qualquer um troca o tema, os outros acompanham em onda a partir do clicado, e a escolha fica guardada pra próxima visita (ou segue o tema do sistema, se a pessoa nunca escolheu). Com um atributo, a troca escreve o tema na página pro seu CSS mudar as cores. Botões de verdade, com teclado e leitor de tela. Cores do sol, da lua e do fundo de noite, tamanho, halo e velocidade ajustáveis. SVG, CSS e um JavaScript pequeno, sem biblioteca.

Ficha

Categoria
Botões
Onde combina
menu/navegação, utilitário
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
6,5 KB de código comprimido. Sem biblioteca externa.
No celular
Leve: usa 15% do processador de um celular intermediário enquanto anima.
Na loja desde
30/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-icones-que-anoitecem.

Assuntos

  • tema
  • modo escuro
  • dark mode
  • modo claro
  • light mode
  • toggle
  • switch
  • alternador
  • ícone
  • icon
  • sol
  • lua
  • lâmpada
  • svg