Trim

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.

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.

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.

Uma linha desliza a partir da borda inferior ou superior até o lugar, sublinhando ou sobrelinhando o elemento.

Adicione um efeito de hover "Underline Reveal" (também chamado overline reveal ou reveal) em [onde].
Uma linha de largura total deve subir deslizando até o lugar a partir de logo abaixo da borda inferior enquanto o ponteiro estiver sobre o elemento, e descer de volta para fora da vista quando sair: rápido e suave.
Recorte a linha na borda para que ela apareça deslizando, e não com fade ou crescendo, e mostre o mesmo efeito no foco do teclado.

O card se desloca e muda levemente de escala conforme o ponteiro se move sobre ele.

Adicione um efeito "Wobble Card" em [onde].
Quando o ponteiro se mover sobre o card, ele deve se deslocar um pouco em direção ao ponteiro enquanto o conteúdo se desloca um pouco no sentido oposto com um leve aumento de escala, acompanhando com suavidade, e tudo volta ao lugar quando o ponteiro sair.
Mantenha o movimento pequeno e desative-o em dispositivos de toque e se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um fundo colorido entra varrendo a partir de uma borda com um leve exagero elástico.

Adicione um efeito de hover "Background Bounce Sweep" em [onde].
Uma nova cor de fundo deve entrar varrendo a partir de uma borda, passar um pouco da borda oposta com um quique elástico e então se assentar, enquanto a cor do texto muda para continuar legível; ao sair, ela desliza de volta suavemente.
Mantenha o texto acima do preenchimento e mostre o mesmo efeito no foco do teclado.