Ícone que Vira Nome Ultra

Uma fileira de ícones redondos: passar o mouse num deles alarga o círculo numa pílula colorida em degradê, o ícone some e o nome aparece; os vizinhos se afastam. A página atual fica aberta. Com mouse, toque e teclado.

Ver na loja e baixar

Sobre este efeito

Uma fileira de ícones redondos pra navegação. Passar o mouse (ou o foco do teclado) num deles alarga o círculo numa pílula colorida em degradê, com um brilho da mesma cor embaixo: o ícone encolhe até sumir e o nome aparece no lugar, e os vizinhos se afastam pra dar espaço. Cada item tem o seu degradê. O item da página atual fica aberto quando ninguém está apontando pra fileira. No celular, tocar abre. Só as pontas da pílula e os vizinhos deslizam, sem recalcular a fileira, então é leve. Na saída o nome sai primeiro e o ícone volta depois. A pílula tem 180 px no mínimo, nome maior alarga, e ela não passa do espaço que tem. Os itens são links e o foco do teclado abre a pílula; a fileira cabe no celular. Com menos movimento, troca direto. Tamanho, espaço, tempos, lado pra onde cresce, brilho e cores ajustáveis.

Ficha

Categoria: Menu
Onde combina: menu/navegação, recursos
Alcance: Área: vive dentro de um bloco da página.
Plano: Exclusivo de quem assina o Ultra (R$ 39,90/mês).
Peso: 6,7 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 8% do processador de um celular intermediário enquanto anima.
Na loja desde: 18/09/2026

Como colocar no seu site

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.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-icone-que-vira-nome.

Assuntos

menu
navegacao
pilula
degrade
icones
hover
barra
teclado