ABC DEF
Passe o mouse por cima
Também chamada Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
Ao passar o mouse, um sublinhado cresce a partir de um lado ou do centro sob um link.
Onde usar
Links de navegação, links no texto
Adicione um efeito de hover "Underline Draw" (também chamado de animated underline ou hover underline animation) em [onde].
Quando o ponteiro estiver sobre o link, um sublinhado deve crescer suavemente da esquerda para a direita sob o texto e encolher de novo quando o ponteiro sair: rápido e sutil.
Evite que o sublinhado desloque o layout ao redor e mostre o mesmo efeito no foco do teclado.
Ao passar o mouse, uma linha cresce acima do texto a partir da esquerda, do centro ou da direita.
Onde usar
Links de navegação, abas
Adicione um efeito de hover "Overline Grow" em [onde].
Uma linha acima do texto deve crescer do centro para os dois lados enquanto o ponteiro estiver sobre ele, e encolher de volta ao centro quando sair: rápido e suave.
Reserve espaço para a linha para o texto não se mexer, e mostre o mesmo efeito no foco do teclado.
Também chamada Highlight Marker, Marker Underline, Hero Highlight
Uma faixa colorida no estilo marca-texto é desenhada sobre uma frase para destacá-la.
Onde usar
Destaque de frases-chave
Adicione um efeito marca-texto (Text Highlighter) em [onde], também chamado de highlight marker ou marker underline.
Uma faixa colorida no estilo marca-texto deve passar suavemente por trás da frase-chave, da esquerda para a direita, como se alguém a destacasse com uma caneta.
Reproduza só uma vez quando a frase entrar na tela ao rolar, mantenha o texto legível sobre a faixa e faça a faixa acompanhar a frase corretamente quando ela quebrar em duas linhas.
Também chamada Sliding underline, Active tab indicator, Segmented control pill
Um sublinhado ou pílula desliza da aba anterior para a aba recém-selecionada.
Onde usar
Barras de abas, controles segmentados
Adicione um "Tab Indicator Slide" (também chamado sliding underline ou active tab indicator) em [onde].
Quando uma nova aba for selecionada, o sublinhado deve deslizar da aba anterior para a nova, rápido e desacelerando suavemente, esticando até a largura da nova aba se ela for diferente.
Mantenha a semântica correta de abas com navegação pelas setas do teclado e mova o indicador sem deslizar se o usuário preferir movimento reduzido (prefers-reduced-motion).