Tecla que Troca de Luz Plus

Sobre este efeito

Uma tecla física de aparelho, com luz por baixo e um LED. Apertar atravessa a luz de uma cor para a outra e ela FICA na cor nova, como um equipamento que mudou de modo; apertar de novo traz de volta. No aperto a tecla cresce 2% e assenta, e a luz atravessa de uma cor para a outra em cerca de 0,9 s, em ritmo reto, o que dá o ar de aparelho em vez de interface. É um botão de verdade: Enter e Espaço funcionam e o leitor de tela anuncia o estado sozinho. Com menos movimento, a luz troca na hora e a tecla não cresce. O relevo é estático e as duas luzes são camadas empilhadas que se revezam por opacidade, então é leve, e parada não gasta nada. No toque funciona em celular e tablet. Cores das duas luzes, corpo da tecla, tempo da travessia, tamanho, alcance do brilho e o quanto ela cresce apertada, tudo ajustáveis.

Ficha

Categoria

Botões

Onde combina

utilitário, recursos

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

3,9 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

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-tecla-que-troca-de-luz.

Assuntos

• tecla
• aparelho
• luz
• led
• estado
• acessivel
• teclado