How to create a shimmer effect on border

Hey guys. I would like to know how to create this shimmer effect on the border in button like one on the webflow website.

Chris Bolson•7/1/24, 3:56 PM

This can be achieved by adding a pseudo element to the container and animating it across the bottom of the container.

Make the pseudo element very short, eg 2px and give it a linear-gradient background to achieve the color effect that you want.
Finally use a CSS animation to move it from one side to another.
Here is a quick example:
https://codepen.io/cbolson/pen/ExzqxJE

capt_uhu•7/1/24, 4:24 PM

looks like on the page in question they are using a divdiv but yeah pseudo element is probably a better idea. And the animation is a transform scaleX();transform scaleX(); from 0 to 1. With a transform-origin: 0%;transform-origin: 0%;