Botão que Engole a Tela Plus

Sobre este efeito

Um botão que cobre a página para trocar o tema sem que ninguém veja a troca. A cobertura desce do topo até engolir a tela; escondida atrás dela a página vira de claro para escuro; a cobertura sobe de volta e o que aparece já é a página nova. Descer e subir usam curvas diferentes, com partida lenta, estirão no meio e chegada lenta, o que faz a cobertura parecer hesitar e depois estalar. O tema só vira com a tela 100% coberta, então não há pisca-pisca. Com a preferência de menos movimento, a página troca na hora e a cobertura não entra em cena. O botão anuncia o estado ao leitor de tela, funciona no Enter e no dedo, e a cobertura barra o clique no que está atrás enquanto está no ar. Parado, não gasta nada. Usa a mesma troca de tema da Chave que Anoitece, então os dois convivem na mesma página. Cor que engole, tempo de cada metade, pausa coberto, tamanho do botão e as duas cores dele ajustáveis.

Ficha

Categoria

Botões

Onde combina

transições, 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

4,9 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 9% 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-botao-que-engole-a-tela.

Assuntos

• tema
• escuro
• claro
• cobertura
• transicao
• acessivel
• teclado