javascript not working properly in button hover effect-CodePudding

I am trying to make buttons hover effect on multiple buttons. And for hovering effect I used java script. This javascript is working properly only in one button. Hover effect is that when I hover mouse from any part of button, hovering I start from their and also end from their only, and it covers all part of body of button.

const btn = document.querySelector('.btn');
btn.onmousemove = function(e) {
  const x = e.pageX - btn.offsetLeft;
  const y = e.pageY - btn.offsetTop;

  btn.style.setProperty('--x', x   'px');
  btn.style.setProperty('--y', y   'px');
}

.button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.button .btn {
  font-weight: 400;
  font-size: 12px;
  line-height: 19px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Montserrat';
  color: #FFFFFF;
  text-decoration: none;
  border: 1px solid #42CDE7;
  padding: 10px 25px;
  position: relative;
  overflow: hidden;
}

.button .btn span {
  position: relative;
  z-index: 1;
}

.button .btn::before {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background-color: #42CDE7;
  transition: width 0.7s, height 0.7s;
}

.button .btn:hover::before {
  width: 100%;
  height: 100%;
}

<div >
  <a href="" ><span>BUTTON 1</span></a>
  <a href="" ><span>BUTTON 2</span></a>
</div>

CodePudding user response：

You can do this as follows:

const btns = document.querySelectorAll('.btn');
for(i=0;i<btns.length;i  ){
let btn = btns[i];
btn.onmousemove = function(e) {
  const x = e.pageX - btn.offsetLeft;
  const y = e.pageY - btn.offsetTop;

  btn.style.setProperty('--x', x   'px');
  btn.style.setProperty('--y', y   'px');
}
}

.button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.button .btn {
  font-weight: 400;
  font-size: 12px;
  line-height: 19px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Montserrat';
  color: #FFFFFF;
  text-decoration: none;
  border: 1px solid #42CDE7;
  padding: 10px 25px;
  position: relative;
  overflow: hidden;
}

.button .btn span {
  position: relative;
  z-index: 1;
}

.button .btn::before {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background-color: #42CDE7;
  transition: width 0.7s, height 0.7s;
}

.button .btn:hover::before {
  width: 100%;
  height: 100%;
}

<div >
  <a href="" ><span>BUTTON 1</span></a>
  <a href="" ><span>BUTTON 2</span></a>
</div>

CodePudding user response：

To select all of the buttons use querySelectorAll. Then use forEach to add event listeners to each button.

Identify which button is being hovered over using e.currentTarget.parentNode.

And finally use offsetX and offsetY instead of pageX and pageY to calculate the new x and y coordinates.

const btns = document.querySelectorAll('.btn');

btns.forEach(btn => btn.addEventListener('mousemove', onm ousemove));

function onm ousemove(e) {
  const btn = e.currentTarget.parentNode;
  const x = e.offsetX - btn.offsetLeft;
  const y = e.offsetY - btn.offsetTop;

  btn.style.setProperty('--x', x   'px');
  btn.style.setProperty('--y', y   'px');
}

.button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.button .btn {
  font-weight: 400;
  font-size: 12px;
  line-height: 19px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Montserrat';
  color: #FFFFFF;
  text-decoration: none;
  border: 1px solid #42CDE7;
  padding: 10px 25px;
  position: relative;
  overflow: hidden;
}

.button .btn span {
  position: relative;
  z-index: 1;
}

.button .btn::before {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background-color: #42CDE7;
  transition: width 0.7s, height 0.7s;
}

.button .btn:hover::before {
  width: 100%;
  height: 100%;
}

<div >
  <a href="" ><span>BUTTON 1</span></a>
  <a href="" ><span>BUTTON 2</span></a>
</div>