Interactive Hover Button

An icon drifts out of the button and fades while a new one floats in.

Add an "Icon Float Away" hover effect to [where].
The current icon should drift upward and fade out while a new icon floats up from below into its place, smoothly, and the swap should reverse when the pointer leaves.
Keep the button size fixed during the swap, and show the same effect on keyboard focus.

An overlay slides in from the side the pointer entered and leaves toward the side it exits.

Add a "Direction Aware Hover" effect (also called direction-aware overlay) to [where].
An overlay should slide in from whichever side the pointer entered and slide out toward the side it leaves: quick and smooth.
Work out the side from the pointer position on entry and on exit, and on touch or keyboard focus fall back to one default direction.

An arrow or the element itself slides a few pixels forward or backward on hover.

Add a "Nudge Forward / Backward" hover effect (also called arrow nudge) to [where].
The arrow should slide a little in the direction it points while the pointer is over the element, and slide back when it leaves: quick and small.
Move only the arrow without shifting the label or layout, and show the same effect on keyboard focus.

A colored background wipes across the element from one edge on hover.

Add a "Background Sweep" hover effect (also called background fill or slide fill) to [where].
A new background color should wipe across from the left edge to the right, smooth and quick with no bounce, and retract the same way when the pointer leaves, while the label color switches to stay readable.
Keep the fill clipped inside the element's shape, and show the same effect on keyboard focus.

An outline grows outward from or shrinks toward the element on hover.

Add an "Outline Expand" hover effect to [where].
An outline should start flush with the element's edge and move outward to leave a small gap around it, staying there while hovered and closing back in when the pointer leaves: smooth and quick.
Draw the outline so it doesn't change the element's size or push nearby content, and show the same effect on keyboard focus.

A line grows above the text from the left, center, or right on hover.

Add an "Overline Grow" hover effect to [where].
A line above the text should grow outward from the center to both sides while the pointer is over it, and shrink back to the center when it leaves: quick and smooth.
Reserve space for the line so the text doesn't shift, and show the same effect on keyboard focus.