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:
11 Replies
Kevin Powell
YouTube
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...
Thanks, but it only works when I click on the button. I want it to work when I hover over the button instead.
try swapping active for hover
@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
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
Thanks, and this is the link for codepen code
https://codepen.io/artbymali/pen/mdgLygE
seems like it works just fine to me?
the LET'S TALK button, right? The circle appears at the mouse, it even follows the mouse when you move it
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.
that's cause you're using e.pageY without accounting for the scroll position. You have to subtract window.scrollY from the Y position:
brother I am very very thank ful too you
thank you brother
glad to help
Thanks