Icon Float Away

Ao passar o mouse, um ícone cai para fora da vista e volta por cima.

Adicione um efeito de hover "Icon Drop" em [onde].
O ícone dentro do elemento deve cair para baixo até sumir e depois voltar ao lugar vindo de cima: rápido, com uma aterrissagem suave.
Reproduza uma vez a cada entrada do ponteiro, sem loop, e mantenha o texto e o tamanho do botão inalterados.

Ao passar o mouse, o texto do botão desliza para fora e uma seta e um preenchimento se expandem.

Adicione um efeito "Interactive Hover Button" em [onde].
O pequeno ponto ao lado do texto deve se expandir até preencher o botão enquanto o texto desliza para o lado e some, e o texto com uma seta entra deslizando sobre o novo preenchimento: suave e rápido.
Mantenha o tamanho do botão fixo e o texto legível o tempo todo, e mostre o mesmo efeito no foco do teclado.

O ícone de copiar se transforma em um sinal de visto e o rótulo mostra Copiado por um instante.

Adicione uma animação "Copy-to-Clipboard Feedback" (também chamada copied state ou copy icon to checkmark) em [onde].
Quando o botão de copiar for pressionado, o ícone de copiar deve encolher rapidamente enquanto um sinal de visto é desenhado e o rótulo muda para "Copiado"; depois de um breve momento, tudo volta suavemente.
Mantenha o botão do mesmo tamanho durante a troca para que nada se desloque e anuncie o estado de copiado para leitores de tela.

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.

Ao passar o mouse, uma seta ou o próprio elemento desliza alguns pixels para a frente ou para trás.

Adicione um efeito de hover "Nudge Forward / Backward" (também chamado arrow nudge) em [onde].
A seta deve deslizar um pouco na direção para a qual aponta enquanto o ponteiro estiver sobre o elemento, e voltar quando ele sair: rápido e curto.
Mova só a seta, sem deslocar o texto nem o layout, e mostre o mesmo efeito no foco do teclado.