Icon Spin

The element rotates continuously at constant speed.

Add a "Spin" effect (also called a spinner or rotate loop) to [where].
The element should rotate continuously at a constant, even speed, with no easing between turns.
Make the loop seamless, give the spinner an accessible loading label, and slow or stop it for users who prefer reduced motion.

The element turns by a few degrees when hovered.

Add a "Rotate" hover effect to [where].
The element should turn slightly clockwise while the pointer is over it and turn back when it leaves: smooth and subtle.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.

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.

The button label slides out and an arrow and fill expand in when hovered.

Add an "Interactive Hover Button" effect to [where].
The small dot beside the label should expand to fill the button while the label slides out to the side and fades, and the label with an arrow slides in over the new fill: smooth and quick.
Keep the button size fixed and the label readable throughout, and show the same effect on keyboard focus.

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.

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.