Outline Expand

Anéis de borda concêntricos se expandem para fora ou se contraem para dentro a partir do elemento ao passar o mouse.

Adicione um efeito de hover "Border Ripple" em [onde].
Quando o ponteiro entrar, alguns anéis de borda devem se espalhar a partir do elemento, um após o outro, e sumir: rápido e leve, como uma ondulação na água.
Reproduza uma vez por hover em vez de repetir em loop e não deixe os anéis deslocarem o layout ao redor.

Ao passar o ponteiro, uma linha de borda interna aparece dentro da borda do elemento.

Adicione um efeito de hover "Trim" em [onde].
Uma linha fina deve aparecer suavemente logo dentro da borda do elemento enquanto o ponteiro estiver sobre ele, e sumir quando sair: sutil, sem movimento.
Mantenha a linha dentro do elemento para que o tamanho dele não mude e mostre o mesmo efeito no foco do teclado.

Um halo de luz colorida aparece ao redor do elemento ao passar o mouse.

Adicione um efeito de hover "Glow" (também chamado neon glow) em [onde].
Um halo colorido suave deve surgir ao redor do elemento enquanto o ponteiro estiver sobre ele e sumir quando sair: delicado, sem movimento.
Não deixe o halo afetar o layout e mostre o mesmo efeito no foco do teclado.

Uma borda em degradê se anima ao redor do elemento e se expande quando o ponteiro passa por cima.

Adicione um efeito "Hover Border Gradient" em [onde].
Um brilho curto em degradê deve ficar parado em uma parte da borda; enquanto o ponteiro estiver sobre o elemento, ele deve percorrer a borda em ritmo constante enquanto a borda inteira se ilumina com um brilho suave.
Anime a borda só durante o hover e deixe-a parada se o usuário preferir movimento reduzido (prefers-reduced-motion).

Ao passar o mouse, uma linha cresce acima do texto a partir da esquerda, do centro ou da direita.

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.

O elemento aumenta rapidamente e volta ao tamanho com um salto elástico.

Adicione um efeito de hover "Pop" em [onde].
Toda vez que o ponteiro entrar, o elemento deve inchar uma vez rapidamente e voltar ao tamanho normal, como um pequeno salto elástico.
Reproduza uma vez por hover em vez de manter o tamanho maior ou repetir em loop, e evite que o layout ao redor se desloque.

O elemento afunda para dentro e volta, como se fosse um botão físico sendo apertado.

Adicione um efeito de hover "Push" em [onde].
Toda vez que o ponteiro entrar, o elemento deve encolher uma vez rapidamente e voltar ao tamanho normal com um leve salto, como se fosse um botão físico sendo apertado.
Reproduza uma vez por hover em vez de repetir em loop, e evite que o layout ao redor se desloque.