Hollow

As cores do fundo e do texto fazem uma transição suave para uma nova cor ao passar o mouse.

Adicione um efeito de hover "Background Fade" (também chamado color fade) em [onde].
As cores do fundo e do texto devem fazer uma transição suave para novas cores enquanto o ponteiro estiver sobre o elemento, e voltar quando ele sair: calmo, sem movimento.
Mantenha contraste suficiente entre texto e fundo nos dois estados e mostre o mesmo efeito no foco do teclado.

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.

A cor da borda aparece ou muda com uma transição suave ao passar o mouse.

Adicione um efeito de hover "Border Fade" em [onde].
A borda deve passar suavemente de um tom apagado para a cor de destaque enquanto o ponteiro estiver sobre o elemento: sutil, sem movimento nem mudança de tamanho.
Mantenha a mesma espessura de borda nos dois estados para nada se deslocar 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 sombra suave aparece ou se aprofunda sob o elemento, sugerindo elevação.

Adicione um efeito "Hover Shadow" (também chamado drop shadow on hover ou elevation on hover) em [onde].
Uma sombra suave sob o elemento deve se aprofundar e se espalhar enquanto o ponteiro estiver sobre ele, para parecer elevado, e voltar ao normal quando o ponteiro sair, sem o elemento sair do lugar.
Mantenha a sombra sutil o bastante para funcionar nos temas claro e escuro, e mostre o mesmo efeito no foco do teclado.

Uma camada translúcida tinge o elemento para mostrar que o ponteiro está sobre ele.

Adicione um "Hover State Layer" (também chamado hover state, state layer ou hover overlay) em [onde].
Uma camada translúcida e fraca na cor do conteúdo deve aparecer rapidamente sobre o elemento enquanto o ponteiro estiver sobre ele, e sumir quando ele sair.
Mantenha-a fraca para preservar o contraste, e use a mesma abordagem de camada para os estados de foco e pressionado.