Jeet_Shah
(Jeet Shah)
July 22, 2022, 5:58am
1
How can I achieve this step by step in webflow? (just the gloss effect going from left to right)
edit:
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
abirana
(Abi Rana | Creative Web Developer)
July 22, 2022, 8:33am
2
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
https://preview.webflow.com/preview/abirana?utm_medium=preview_link&utm_source=designer&utm_content=abirana&preview=abe5f6160428f4d149c74ceab76a201b&pageId=62da430183203674741bfe55&workflow=preview
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
Jeet_Shah
(Jeet Shah)
July 22, 2022, 6:50pm
3
Hey Abi! thank you so much for your response! This is very helpful!!
abirana
(Abi Rana | Creative Web Developer)
July 23, 2022, 2:40am
4
No problem, always happy to help.
1 Like