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.
2 Replies
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
looks like on the page in question they are using a
div but yeah pseudo element is probably a better idea. And the animation is a transform scaleX(); from 0 to 1. With a transform-origin: 0%;