Animation only works on first element when using Var CSS-CodePudding

I have found a lovely button animation and implemented it using a tutorial from this video. The button animation works on the first button, however not properly on the second.

It uses JavaScript and CSS var() to generate an animation, both of which I am not familiar with.

HTML and JavaScript is as follows, Run Snippet to see what I mean:

.btn {
  position: relative;
  display: inline-flex;
  height: 50px;
  width: 100px;
  background: #ffffff;
  /* color: rgb(11, 81, 211); */
  border: 2px solid rgb(11, 81, 211);
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 1px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn span {
  padding-left: 50%;
  padding-right: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
  font-size: 20px;
  color: rgb(11, 81, 211);
}

.btn span:hover {
  color: rgb(255, 255, 255);
}

.btn::before {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgb(11, 81, 211);
  transition: width 0.5s, height 0.5s;
}

.btn:hover::before {
  width: 1200px;
  height: 1200px;
  color: white;
}

<div>
  <button type="submit"  id="button1"><span>Plot</span></button>
  <script>
    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');
    }
  </script>
</div>

<div>
  <button type="submit"  id="button2"><span>Plot</span></button>
  <script>
    const btn2 = document.querySelector('.btn');
    btn2.onmousemove = function(e) {
      const x = e.pageX - btn2.offsetLeft;
      const y = e.pageY - btn2.offsetTop;

      btn2.style.setProperty('--x', x   'px');
      btn2.style.setProperty('--y', y   'px');
    }
  </script>
</div>

I have tried renaming the function, the var() etc. but with no luck. Perhaps I could use Id's and pass to the CSS, but I am struggling to find a method that would allow a dynamic number of buttons to be created.

Any help much appreciated.

CodePudding user response：

You need to give a different classname in the second button and also need to add the css of that class. Here is your solution

.btn, .btn-2 {
  position: relative;
  display: inline-flex;
  height: 50px;
  width: 100px;
  background: #ffffff;
  /* color: rgb(11, 81, 211); */
  border: 2px solid rgb(11, 81, 211);
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 1px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn span, .btn-2 span {
  padding-left: 50%;
  padding-right: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
  font-size: 20px;
  color: rgb(11, 81, 211);
}

.btn span:hover, .btn-2 span:hover {
  color: rgb(255, 255, 255);
}

.btn::before, .btn-2::before {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgb(11, 81, 211);
  transition: width 0.5s, height 0.5s;
}

.btn:hover::before, .btn-2:hover::before {
  width: 1200px;
  height: 1200px;
  color: white;
}

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <div>
          <button type="submit"  id="button1"><span>Plot</span></button>
          <script>
            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');
            }
          </script>
        </div>
        
        <div>
          <button type="submit"  id="button2"><span>Plot</span></button>
          <script>
            const btn2 = document.querySelector('.btn-2');
            btn2.onmousemove = function(e) {
              const x = e.pageX - btn2.offsetLeft;
              const y = e.pageY - btn2.offsetTop;
        
              btn2.style.setProperty('--x', x   'px');
              btn2.style.setProperty('--y', y   'px');
            }
          </script>
        </div>
  </body>
</html>

CodePudding user response：

Just Use diffirent selectors for your buttons, or just use querySelectorAll() and loop inside all btns and attach the event to all of them.

.btn {
  position: relative;
  display: inline-flex;
  height: 50px;
  width: 100px;
  background: #ffffff;
  /* color: rgb(11, 81, 211); */
  border: 2px solid rgb(11, 81, 211);
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 1px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn span {
  padding-left: 50%;
  padding-right: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
  font-size: 20px;
  color: rgb(11, 81, 211);
}

.btn span:hover {
  color: rgb(255, 255, 255);
}

.btn::before {
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgb(11, 81, 211);
  transition: width 0.5s, height 0.5s;
}

.btn:hover::before {
  width: 1200px;
  height: 1200px;
  color: white;
}

<div>
  <button type="submit"  id="button1"><span>Plot</span></button>
</div>

<div>
  <button type="submit"  id="button2"><span>Plot</span></button>
  <script>
    const btns = document.querySelectorAll('.btn');
    for(let i = 0; i < btns.length; i  ){
      btns[i].onmousemove = function(e) {
        const x = e.pageX - btns[i].offsetLeft;
        const y = e.pageY - btns[i].offsetTop;

        btns[i].style.setProperty('--x', x   'px');
        btns[i].style.setProperty('--y', y   'px');
     }
   }
  </script>
</div>

CodePudding user response：

The problem here is that in both scripts you use document.querySelector('.btn') which selects the first element which in the tree which has the .btn class and that is button1. You should rather user document.getElementsByClassName('btn')[0] for button1 and document.getElementsByClassName('btn')[1] for button2 as shown bellow:

<div>
  <button type="submit"  id="button1"><span>Plot</span></button>
  <script>
    const btn2 = document.getElementsByClassName('btn')[0];
    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');
    }
  </script>
</div>

<div>
  <button type="submit"  id="button2"><span>Plot</span></button>
  <script>
    const btn2 = document.getElementsByClassName('btn')[1];
    btn2.onmousemove = function(e) {
      const x = e.pageX - btn2.offsetLeft;
      const y = e.pageY - btn2.offsetTop;

      btn2.style.setProperty('--x', x   'px');
      btn2.style.setProperty('--y', y   'px');
    }
  </script>
</div>