Icon Drop

Um ícone flutua para fora do botão e some enquanto um novo entra flutuando.

Adicione um efeito de hover "Icon Float Away" em [onde].
O ícone atual deve subir flutuando e sumir enquanto um ícone novo sobe de baixo para ocupar o lugar dele, com suavidade, e a troca deve se inverter quando o ponteiro sair.
Mantenha o tamanho do botão fixo durante a troca 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.

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