Link que Troca de Letra Plus

Sobre este efeito

Links de menu, rodapé ou chamada em que, passando o mouse, cada letra troca por uma cópia de outra cor, uma depois da outra, em escada; saindo, elas destrocam na mesma ordem, um pouco mais depressa. São seis jeitos de trocar: sobe (a letra sai por cima e a cópia sobe de baixo, o clássico dos menus grandes), desce, de lado, gira, desfoca e vira, em que cada letra é a face de um cubo que roda. A escada pode começar do início, do meio ou do fim da palavra, e cada link escolhe o seu jeito por um atributo. O link continua sendo texto: a fonte, o tamanho e a cor são os do seu site, a linha quebra entre as palavras, dá pra selecionar e copiar a palavra uma vez só, e o leitor de tela lê a palavra inteira, não letra por letra. Chegando com o Tab, o foco faz a mesma troca do mouse; no toque, a troca acontece enquanto o dedo encosta e desfaz sozinha, sem segurar o link. Sair no meio não dá salto: cada letra volta de onde estava. Parado, não roda nada; a troca é só CSS. Com a preferência de menos movimento, nenhuma letra se mexe: o link só muda de cor e ganha um sublinhado. Jeito, tempo, atraso entre letras, ritmo da volta, curva, cor da cópia, folga das letras e desfoque ajustáveis.

Ficha

Categoria

Hover

Onde combina

menu/navegação, chamada pra açã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

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

No celular

Moderado: usa 27% do processador de um celular intermediário enquanto anima.

Na loja desde

25/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-link-que-troca-de-letra.

Assuntos

• hover
• link
• links
• menu
• navegação
• letras
• texto
• tipografia
• rodapé
• teclado
• css
• js