Background Bounce Sweep

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

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.

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