⭐️CSS Tip!⭐️

To create an inverted :hover effect, you can use mix-blend-mode with custom :hover properties.

button > span {
  left: calc(var(--x, 0) * 1px);
  top: calc(var(--y, 0) * 1px);
  mix-blend-mode: difference; 
}

The cool thing is that using mix-blend-mode acts as a color inverter, which works well with monochrome controls.

As for how to move this code to JavaScript?

const UPDATE = ({target, x, y }) => {
  const bounds = target.getBoundingClientRect()
  target .style.setProperty('--x', x - bounds.left)
  target .style.setProperty('--y', y - bounds .top)
}

const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))

button:is(:hover, :focus-visible) {
  --active: 1;
}
button span {
  transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3);
  transition: transform 0.25s;
}

💡 How to Easily Create an Accordion Without JavaScript: A Note for Front-End Developers

🖥 pop() method:

🌟 This method removes the last element of an array and returns the removed element.

Icons hover animation [Glassmorphism]👇

https://codepen.io/OfigenusMaximus/pen/xxQgxvE

🔰 CSS for JavaScript Developers