how to create position aware button hover effect

I was working to create this type of effect but I field can any one help me recreate:

https://www.youtube.com/watch?v=e3w9liPXSi4

Creating a CSS-only directionally aware button

Nothing wrong with a little JS here and there, but it’s always nice when we can make something work without it, and thanks to :has(), there are a lot of new things that are possible with CSS only, like this effect!

Links

More on has: https://youtu.be/OGJvhpoE8b4

Finished code: https://codepen.io/kevinpowell/pen/dygZEMj

Timestamps
00:0...

muhammadali770OP•4/9/24, 2:23 AM

Thanks, but it only works when I click on the button. I want it to work when I hover over the button instead.

Shane•4/9/24, 2:39 AM

try swapping active for hover

Jochem•4/9/24, 7:31 AM

@muhammadali770 share your code in something like codepen or deployed on github pages, it will make it a lot easier for people to give targeted help rather than just broad suggestions

Jochem•4/9/24, 7:32 AM

if people can see your issue in their own browsers, it's also more likely they will help. If possible, please make a minimum viable example, so preferably just the button and CSS associated with that button, so people don't have to dig through hundreds of lines of irrelevant CSS and HTML to help you solve the issue you're having

JJochem @muhammadali770 share your code in something like codepen or deployed on github ...

muhammadali770OP•4/9/24, 7:43 AM

Thanks, and this is the link for codepen code
https://codepen.io/artbymali/pen/mdgLygE

CodePenMuhammad ali

mdgLygE

...

Jochem•4/9/24, 7:43 AM

seems like it works just fine to me?

Jochem•4/9/24, 7:45 AM

the LET'S TALK button, right? The circle appears at the mouse, it even follows the mouse when you move it

muhammadali770OP•4/9/24, 7:57 AM

But there is another problem. When scrolling down the page and hovering over the button, you may notice that the circle animation is not showing with scroll down. To fix this , you can commit the overflow: hidden property in the button. you will see that the header remains fixed and the pseudo-element of the button (the circle) scrolls down with the scrollbar instead of staying fixed with the button for the animation.

Jochem•4/9/24, 8:04 AM

that's cause you're using e.pageY without accounting for the scroll position. You have to subtract window.scrollY from the Y position:

muhammadali770OP•4/9/24, 8:09 AM

brother I am very very thank ful too you

muhammadali770OP•4/9/24, 8:10 AM

thank you brother

Jochem•4/9/24, 8:10 AM

glad to help

muhammadali770OP•4/9/24, 8:14 AM

Thanks