Need help with white glossy effect on button

How can I achieve this step by step in webflow? (just the gloss effect going from left to right)


I also found this separate code for the gloss effect from a diff code pen here

    background-repeat: no-repeat;
    background-position: -135px -135px, 0 0;
    background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.0) 50%);
    background-size: 250% 250%, 100% 100%;
    transition: background-position 0s ease;

how to implement this in webflow. I am so lost

You can use that same code, if you want to do it with custom CSS

But you are probably looking for the Webflow way, so check it here

This is done with the Webflow’s interactions, so click on the button the check the Interaction Panel. You can copy the button if you want to use and then re-edit in your project.

If you want to check the live link, it’s here Glossy Button Effect by Abi Rana | Built with Webflow

1 Like

Hey Abi! thank you so much for your response! This is very helpful!!

No problem, always happy to help.

1 Like