Nudge Forward / Backward

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 elemento sobe alguns pixels ao passar o mouse, como se estivesse flutuando.

Adicione um efeito de hover "Float" (também chamado lift ou raise) em [onde].
O elemento deve subir um pouco e ficar elevado enquanto o ponteiro estiver sobre ele, e voltar ao lugar quando sair: suave e delicado, sem quique.
Mova-o só visualmente, sem deslocar o layout ao redor, e mostre o mesmo efeito no foco do teclado.

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, um contorno cresce para fora do elemento ou encolhe em direção a ele.

Adicione um efeito de hover "Outline Expand" em [onde].
Um contorno deve começar rente à borda do elemento e se afastar até deixar um pequeno espaço ao redor, ficar assim durante o hover e voltar a se fechar quando o ponteiro sair: suave e rápido.
Desenhe o contorno de forma que ele não mude o tamanho do elemento nem empurre o conteúdo ao redor, e mostre o mesmo efeito no foco do teclado.

Ao passar o mouse, uma linha cresce acima do texto a partir da esquerda, do centro ou da direita.

Adicione um efeito de hover "Overline Grow" em [onde].
Uma linha acima do texto deve crescer do centro para os dois lados enquanto o ponteiro estiver sobre ele, e encolher de volta ao centro quando sair: rápido e suave.
Reserve espaço para a linha para o texto não se mexer, e mostre o mesmo efeito no foco do teclado.

O elemento aumenta rapidamente e volta ao tamanho com um salto elástico.

Adicione um efeito de hover "Pop" em [onde].
Toda vez que o ponteiro entrar, o elemento deve inchar uma vez rapidamente e voltar ao tamanho normal, como um pequeno salto elástico.
Reproduza uma vez por hover em vez de manter o tamanho maior ou repetir em loop, e evite que o layout ao redor se desloque.