Como ele é
Em repouso, o texto parece comum. Quando o mouse entra, uma linha fina, com espessura de um décimo do tamanho da fonte, se desenha logo abaixo das letras. No estilo padrão ela nasce no meio e se abre para as duas pontas em um quarto de segundo, e recolhe quando o mouse sai. Nos outros dois estilos, a linha entra por um lado e sai pelo outro, como uma régua que passa sob a palavra, ou já fica visível, sai por um lado e volta pelo outro. A cor é sempre a do próprio texto, então acompanha o modo claro e o escuro sem ajuste.
Você pode estar procurando isto se pediu algo assim
- linha que aparece embaixo do link quando passo o mouse
- sublinhado que cresce do meio para os lados no menu
- efeito de traço passando por baixo da palavra no hover
- deixar os links do rodapé com cara de site de agência
- menu de navegação com sublinhado animado e elegante
- aquele efeito de link sublinhado de portfólio de designer
- underline animado que entra por um lado e sai pelo outro
Também chamado de
- sublinhado animado
- animated underline
- hover underline
- link underline animation
- sublinhado no hover
- underline hover effect
Quando usar
- Links do menu principal e do rodapé de sites institucionais
- Listas de contato e de redes sociais em portfólios
- Chamadas dentro do texto que precisam parecer clicáveis
- Sites editoriais com tipografia grande e em caixa alta
Quando evitar
- Apps usados principalmente no celular, onde não existe hover
- Links no meio de parágrafos, que precisam de sublinhado visível sem hover para serem reconhecidos
Como pedir para a sua IA
Adicione um sublinhado animado no hover aos links do menu e do rodapé: a linha cresce do centro na cor do texto, também aparece no foco pelo teclado e fica estática para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Filete
Filete funciona no celular?
Filete reage à entrada do mouse, e telas de toque não têm hover, então no celular a animação não serve de pista. Se o link precisa se destacar também ali, use o estilo que mantém a linha visível em repouso e só a faz sair e voltar no hover. O prompt do THM Componentes também pede teste em mobile.
Dá para usar Filete com navegação por teclado?
Filete anima quando o mouse entra no texto, não quando o link recebe foco pela tecla Tab. O link continua acessível, porque o componente é só um invólucro e a linha fica oculta para leitores de tela, mas vale pedir à IA que dispare a mesma animação no foco.
Como trocar a cor e a espessura do sublinhado?
A linha de Filete usa a cor atual do texto, então basta mudar a cor do link com os tokens do seu projeto, como o prompt do THM Componentes orienta. A espessura e a distância das letras são proporcionais ao tamanho da fonte e se ajustam pelas props de proporção.
