Hover

Shine Sweep

Also called Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button

A diagonal band of light sweeps across the element from one side to the other on hover.

Buttons, cards, badges

  • Shine on hover (::before skewed gradient)
  • Shiny Button
  • Rainbow Button
  • Shimmer Button

View demo source

Prompt

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.

Add a "Shine Sweep" hover effect (also called sheen, shiny button, shine on hover, glint, shimmer or shimmer button) to [where].
A soft diagonal band of light should sweep across the element from left to right, repeating with a short pause while the pointer stays over it.
Keep the band clipped inside the element, stop it when the pointer leaves, and don't run it for users who prefer reduced motion.

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.