Css only button shine effect
front-endHello everyone 
I have been struggling with this one, and even though it seems simple, I just can't get the effect right.
I am working on a button hover animation where the idea is the following
1. The button has it's normal bg color and text color
2. On hover the gradient clips the text and goes from left to right providing the "shine" effect
3. The button is back in the initial state
4. On mouse leave the gradient goes back from right to left
5. The button is back in the initial state
The only condition I have is not to change the html markup (no adding data-label attrs for pseudo elements, etc.)
Here's my WIP codepen:
https://codepen.io/invocation97/pen/ByzZJQX?editors=1100
Any advice, examples, and help is more than welcome!
Thanks in advance!
I have been struggling with this one, and even though it seems simple, I just can't get the effect right.I am working on a button hover animation where the idea is the following
1. The button has it's normal bg color and text color
2. On hover the gradient clips the text and goes from left to right providing the "shine" effect
3. The button is back in the initial state
4. On mouse leave the gradient goes back from right to left
5. The button is back in the initial state
The only condition I have is not to change the html markup (no adding data-label attrs for pseudo elements, etc.)
Here's my WIP codepen:
https://codepen.io/invocation97/pen/ByzZJQX?editors=1100
Any advice, examples, and help is more than welcome!
Thanks in advance!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
