Rectangle Fill

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.

Ao passar o mouse, um círculo colorido cresce a partir do centro ou encolhe em direção a ele para preencher o elemento.

Adicione um efeito de hover "Radial Fill" (também chamado circle expand) em [onde].
Um círculo da nova cor deve crescer suavemente a partir do centro até preencher o elemento, e encolher de volta ao centro quando o ponteiro sair, enquanto a cor do texto muda para continuar legível.
Mantenha o círculo recortado dentro da forma do elemento e o texto acima dele, 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.

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.

O elemento gira alguns graus ao passar o mouse.

Adicione um efeito de hover "Rotate" em [onde].
O elemento deve girar levemente no sentido horário enquanto o ponteiro estiver sobre ele e voltar quando sair: suave e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

Os cantos do elemento se arredondam suavemente ao passar o ponteiro.

Adicione um efeito de hover "Round Corners" em [onde].
Os cantos retos do elemento devem se arredondar suavemente enquanto o ponteiro estiver sobre ele e voltar a ficar retos quando sair: suave e rápido.
Mantenha o tamanho do elemento inalterado e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, uma faixa diagonal de luz atravessa o elemento de um lado ao outro.

Adicione um efeito de hover "Shine Sweep" (também chamado sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) em [onde].
Uma faixa diagonal de luz suave deve atravessar o elemento da esquerda para a direita, repetindo com uma pausa curta enquanto o ponteiro estiver sobre ele.
Mantenha a faixa recortada dentro do elemento, pare-a quando o ponteiro sair e não a reproduza se o usuário preferir movimento reduzido (prefers-reduced-motion).