Hover Border Gradient

A bright highlight travels around the border of a card.

Add a "Border Beam" effect (also called a shine border or moving border) to [where].
A short bright highlight should travel around the card's border at an even, unhurried pace, looping without a visible jump.
Keep the card's content and size unchanged by the effect, and stop the beam for users who prefer reduced motion.

A colored light halo appears around the element on hover.

Add a "Glow" hover effect (also called neon glow) to [where].
A soft colored halo should fade in around the element while the pointer is over it and fade out when it leaves: gentle, with no movement.
Keep the halo from affecting layout, 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 soft shadow appears or deepens beneath the element on hover to suggest elevation.

Add a "Hover Shadow" effect (also called drop shadow on hover or elevation on hover) to [where].
A soft shadow beneath the element should deepen and spread while the pointer is over it so it looks raised, and fade back when it leaves, while the element itself stays in place.
Keep the shadow subtle enough to work in both light and dark themes, and show the same effect on keyboard focus.

A translucent overlay tints the element to show the pointer is over it.

Add a "Hover State Layer" (also called hover state, state layer or hover overlay) to [where].
A faint translucent overlay in the content color should fade in quickly over the element while the pointer is over it, and fade out when it leaves.
Keep it faint so contrast stays intact, and use the same layer approach for focus and pressed states.

An icon drops out of view and comes back from above on hover.

Add an "Icon Drop" hover effect to [where].
The icon inside the element should drop down out of view and then fall back into place from above: quick, with a soft landing.
Play it once each time the pointer enters rather than looping, and keep the label and button size unchanged.