Nudge Forward / Backward

Al pasar el cursor, el texto del botón sale deslizándose y entran una flecha y un relleno que se expande.

Añade un efecto "Interactive Hover Button" en [dónde].
El pequeño punto junto al texto debe expandirse hasta llenar el botón mientras el texto se desliza hacia un lado y se desvanece, y el texto con una flecha entra deslizándose sobre el nuevo relleno: suave y rápido.
Mantén fijo el tamaño del botón y el texto legible en todo momento, y muestra el mismo efecto con el foco del teclado.

El elemento sube unos píxeles al pasar el cursor, como si flotara.

Añade un efecto hover "Float" (también llamado lift o raise) en [dónde].
El elemento debe subir un poco y quedarse elevado mientras el cursor está encima, y volver a su sitio cuando sale: suave y delicado, sin rebote.
Muévelo solo visualmente sin desplazar el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, un icono cae fuera de la vista y vuelve desde arriba.

Añade un efecto hover "Icon Drop" en [dónde].
El icono dentro del elemento debe caer hacia abajo hasta salir de la vista y luego volver a su lugar desde arriba: rápido, con un aterrizaje suave.
Reprodúcelo una vez cada vez que entre el puntero, sin bucle, y no cambies el texto ni el tamaño del botón.

Al pasar el cursor, un contorno crece hacia fuera desde el elemento o se contrae hacia él.

Añade un efecto hover "Outline Expand" en [dónde].
Un contorno debe empezar pegado al borde del elemento y moverse hacia fuera hasta dejar un pequeño espacio alrededor, quedarse ahí durante el hover y volver a cerrarse cuando salga el puntero: suave y rápido.
Dibuja el contorno de forma que no cambie el tamaño del elemento ni empuje el contenido cercano, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, una línea crece sobre el texto desde la izquierda, el centro o la derecha.

Añade un efecto hover "Overline Grow" en [dónde].
Una línea sobre el texto debe crecer desde el centro hacia ambos lados mientras el puntero esté encima, y encogerse de vuelta hacia el centro al salir: rápido y suave.
Reserva espacio para la línea para que el texto no se mueva, y muestra el mismo efecto con el foco del teclado.

El elemento se agranda rápidamente y vuelve a su tamaño con un rebote elástico.

Añade un efecto hover "Pop" en [dónde].
Cada vez que entre el puntero, el elemento debe hincharse una vez rápidamente y volver a su tamaño normal, como un pequeño rebote elástico.
Reprodúcelo una vez por hover en lugar de mantener el tamaño mayor o repetirlo en bucle, y evita que el diseño de alrededor se desplace.