DEV Community

loading...

Discussion on: A shiny-on-hover effect that follows your mouse (CSS) ✨

Collapse
biowaffeln profile image
Mark Kvetny

That's a really cool effect, thanks for the article! A note on the React code, you can simply bind the event handler with the onMouseMove prop, which saves you some of the boilerplate:

  const onMouseMove = (e) => {
    const btn = e.currentTarget
    const { x, y } = btn.getBoundingClientRect()
    btn.style.setProperty("--x", e.clientX - x)
    btn.style.setProperty("--y", e.clientY - y)
  }

  return (
    <button className="shiny" onMouseMove={onMouseMove}>
      very cool button
    </button>
  )
Enter fullscreen mode Exit fullscreen mode

(The Svelte should look very similar to the one above.)

Collapse
bholmesdev profile image
Ben Holmes Author

Ah, right you are! I somehow spaced on the fact that currentTarget solves the problem 🤦‍♂️

I'll update these snippets!