Rotate

O elemento se inclina para o lado ao passar o ponteiro.

Adicione um efeito de hover "Skew" em [onde].
O elemento deve se inclinar para o lado até ficar levemente enviesado enquanto o ponteiro estiver sobre ele, e se endireitar quando sair: rápido e suave.
Mantenha o texto legível enquanto estiver inclinado, evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

Um ícone dentro de um botão gira quando o mouse passa sobre o botão.

Adicione um efeito de hover "Icon Spin" em [onde].
O ícone dentro do elemento deve dar uma volta completa com suavidade quando o ponteiro entrar, e girar de volta quando sair.
Gire só o ícone, não o botão inteiro, e mostre o mesmo efeito no foco do teclado.

O elemento balança de um lado para o outro inclinando-se, como um objeto instável.

Adicione um efeito de atenção "Wobble" em [onde].
O elemento deve balançar de um lado para o outro inclinando-se, começando com um balanço grande que diminui a cada ida e volta até parar.
Reproduza uma vez ao ser acionado e não deixe o conteúdo vizinho se deslocar.

O elemento balança de um lado para o outro a partir da borda superior, como um pêndulo com amplitude cada vez menor.

Adicione um efeito de atenção "Swing" em [onde].
O elemento deve balançar de um lado para o outro como uma placa pendurada, começando com um balanço amplo que diminui rápido.
Faça o elemento girar a partir da borda superior, e não do centro, e reproduza uma vez ao ser acionado.

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

O elemento diminui um pouco, de forma suave, quando o ponteiro está sobre ele.

Adicione um efeito de hover "Shrink" (também chamado scale down) em [onde].
O elemento deve diminuir um pouco, de forma suave, enquanto o ponteiro estiver sobre ele, e voltar ao tamanho quando sair: rápido e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.