Border Fade

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.

Ao passar o mouse, um contorno cresce para fora do elemento ou encolhe em direção a ele.

Adicione um efeito de hover "Outline Expand" em [onde].
Um contorno deve começar rente à borda do elemento e se afastar até deixar um pequeno espaço ao redor, ficar assim durante o hover e voltar a se fechar quando o ponteiro sair: suave e rápido.
Desenhe o contorno de forma que ele não mude o tamanho do elemento nem empurre o conteúdo ao redor, e mostre o mesmo efeito no foco do teclado.

Ao passar o mouse, o fundo preenchido se esvazia e deixa só o botão com contorno.

Adicione um efeito de hover "Hollow" (também chamado ghost fill) em [onde].
O fundo preenchido deve sumir aos poucos, deixando só o contorno, e a cor do texto deve mudar para continuar legível sobre o fundo vazio: suave e rápido.
Mantenha a borda com a mesma espessura nos dois estados para o elemento não mudar de tamanho, e mostre o mesmo efeito no foco do teclado.

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.

O elemento muda de escala com um exagero elástico quando o hover começa ou termina.

Adicione um efeito de hover "Bounce Scale" (também chamado bounce in / out) em [onde].
O elemento deve crescer um pouco com um quique elástico visível, passando rapidamente do tamanho final antes de se assentar, e voltar com o mesmo quique quando o ponteiro sair.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

Um fundo de destaque desliza entre os cards de uma grade para acompanhar o card sob o mouse.

Adicione um "Card Hover Effect" (também chamado sliding highlight card grid) em [onde].
Um fundo de destaque suave deve aparecer atrás do card sob o ponteiro e deslizar com fluidez até o próximo card para onde o ponteiro for, sumindo quando o ponteiro sair da grade.
Faça o foco do teclado mover o destaque do mesmo jeito e evite que os próprios cards se desloquem.