Coyote Labby Coyote Concept

CSS only · hover · pseudo-element

Glare Sweep

A sheet of light passes over once on hover, like a reflection across glass. Feels expensive, costs nothing.

Class
.CCSweep
Weight
0.7 KB
Needs
CSS only
Best for
Cards, pricing boxes, secondary buttons

Tune it

Every snippet on this page follows these settings.

How Glare Sweep works

  1. A tall, narrow band of light sits just off the left edge on ::after, skewed slightly.
  2. overflow: hidden keeps it invisible until it's inside the element.
  3. On hover a one-off animation slides it all the way across and out of the right side.
  4. Because it runs once and stops, it reads as a reflection rather than a loading shimmer.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCSweep">.
  4. That’s it. Glare Sweep is CSS only.

Core components

Glare Sweep on button, dropdown, card, tabs, input.

More ways to use it

The same class on image card, badge, nav bar.

Pairs well with

Avoid on the same element Moonrise (::after), Ember Sparks (clipping), Border Beam (::after), Spotlight (::after), 3D Tilt (::after).

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • Decorative only.
  • Also plays when a field inside the element gets keyboard focus.
  • Removed under reduced motion.

Performance

  • 0.7 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Glare Sweep

How do I add Glare Sweep to a button?

Add the class CCSweep next to CCButton, inside an element with the CCTheme class, then include the Glare Sweep CSS. The Copy button on this page gives you all of it in one snippet.

Does Glare Sweep need JavaScript?

No, it's CSS only.

Which browsers support Glare Sweep?

Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.

Is Glare Sweep accessible?

Decorative only. Also plays when a field inside the element gets keyboard focus. Removed under reduced motion.