Hover Shadow

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.

Um halo de luz colorida aparece ao redor do elemento ao passar o mouse.

Adicione um efeito de hover "Glow" (também chamado neon glow) em [onde].
Um halo colorido suave deve surgir ao redor do elemento enquanto o ponteiro estiver sobre ele e sumir quando sair: delicado, sem movimento.
Não deixe o halo afetar o layout e mostre o mesmo efeito no foco do teclado.

Ao passar o ponteiro, o elemento desce alguns pixels, como se fosse pressionado para dentro da página.

Adicione um efeito de hover "Sink" em [onde].
O elemento deve descer um pouco e ficar lá enquanto o ponteiro estiver sobre ele, como se fosse pressionado para dentro da página, e subir de volta quando sair: suave, sem efeito de quique.
Mova-o só visualmente, sem deslocar o layout ao redor, e mostre o mesmo efeito no foco do teclado.

Uma camada translúcida tinge o elemento para mostrar que o ponteiro está sobre ele.

Adicione um "Hover State Layer" (também chamado hover state, state layer ou hover overlay) em [onde].
Uma camada translúcida e fraca na cor do conteúdo deve aparecer rapidamente sobre o elemento enquanto o ponteiro estiver sobre ele, e sumir quando ele sair.
Mantenha-a fraca para preservar o contraste, e use a mesma abordagem de camada para os estados de foco e pressionado.

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.

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.