Background Fade

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.

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.

Um fundo colorido varre o elemento a partir de uma borda ao passar o mouse.

Adicione um efeito de hover "Background Sweep" (também chamado background fill ou slide fill) em [onde].
Uma nova cor de fundo deve varrer o elemento da borda esquerda para a direita, suave e rápida, sem quique, e recolher do mesmo jeito quando o ponteiro sair, enquanto a cor do texto muda para continuar legível.
Mantenha o preenchimento recortado dentro do formato do elemento 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.

O elemento sobe e depois balança para cima e para baixo sem parar enquanto está sob o mouse.

Adicione um efeito de hover "Bob" (também chamado hang) em [onde].
O elemento deve subir um pouco e depois continuar balançando suavemente para cima e para baixo enquanto o ponteiro estiver sobre ele, e descer de volta quando o ponteiro sair: lento e suave.
Repita o balanço só durante o hover e deixe o elemento parado se o usuário preferir movimento reduzido (prefers-reduced-motion).