Background Sweep

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.

Ao passar o mouse, um retângulo se expande ou se contrai dentro do elemento para mudar o fundo.

Adicione um efeito de hover "Rectangle Fill" em [onde].
A nova cor de fundo deve se fechar a partir das quatro bordas conforme um retângulo interno encolhe em direção ao centro, e voltar a se abrir quando o ponteiro sair, enquanto a cor do texto muda para continuar legível: suave e rápido.
Mantenha o texto acima do preenchimento e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, o fundo se abre ou se fecha como persianas, a partir do centro ou das bordas.

Adicione um efeito de hover "Shutter Fill" (também chamado shutter) em [onde].
A nova cor de fundo deve se abrir a partir de uma linha vertical no centro para os dois lados, como persianas, e se fechar de volta ao centro quando o ponteiro sair, enquanto a cor do texto muda para continuar legível: suave e rápido.
Mantenha o preenchimento recortado dentro do elemento e o texto por cima, e mostre o mesmo efeito no foco do teclado.

Uma sobreposição desliza a partir do lado por onde o ponteiro entrou e sai pelo lado por onde ele deixa o elemento.

Adicione um efeito "Direction Aware Hover" (também chamado direction-aware overlay) em [onde].
Uma sobreposição deve deslizar a partir do lado por onde o ponteiro entrou e sair pelo lado por onde ele deixa o elemento: rápido e suave.
Calcule o lado pela posição do ponteiro na entrada e na saída e, no toque ou no foco do teclado, use uma direção padrão.

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).

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.

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.