Icon Float Away

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.

The copy icon morphs into a checkmark and the label reads Copied for a moment.

Add a "Copy-to-Clipboard Feedback" animation (also called a copied state or copy icon to checkmark) to [where].
When the copy button is pressed, the copy icon should quickly shrink away as a checkmark draws in and the label changes to "Copied", then everything eases back after a short moment.
Keep the button the same size during the swap so nothing shifts, and announce the copied state to screen readers.

An icon inside a button spins around when the button is hovered.

Add an "Icon Spin" hover effect to [where].
The icon inside the element should spin one full turn smoothly when the pointer enters, and turn back when it leaves.
Spin only the icon, not the whole button, 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.