e.clientX - rect.left возвращает ложное значение // vanilla JS

Question

Я сейчас создаю кнопку, которая парит в градиенте. Все работает нормально, кроме положения градиента, которое должно возвращать e.clientX - rect.left. При наведении курсора мыши на кнопку у ее левого края результат 0% (отлично!). Но если навести его на правый край, возвращается что-то вроде 150%.

Большое спасибо за вашу помощь!

let btn = document.getElementById("btn");

btn.onmousemove = function (e) {
  let rect = e.target.getBoundingClientRect();
  let x = e.clientX - rect.left;
  btn.style.setProperty("--x", x + "%");
};

:root {
  --x: 0%;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

.wrapper {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 75px);
}

button {
  height: 50px;
  min-height: 50px;
  min-width: 150px;
  border: none;
  position: relative;

  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) 100%
  );

  color: white;

  border-radius: 10px;

  padding: 0;
}

button:hover {
  background: none;
  cursor: pointer;
}

button::after {
  content: "";
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) var(--x),
    rgba(7, 22, 103, 1) 100%
  );

  height: 100%;
  width: 100%;
  border-radius: 10px;

  top: 0;
  left: 0;

  display: none;
  z-index: -1;
}

button:hover::after {
  display: inline;
}

span {
  margin: 0 30px;
}

  
    <link
      href="https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans&display=swap"
      rel="stylesheet"
    />
    
    <div class="wrapper">
      <button id="btn"><span>Click here</span></button>
    </div>


 

Answer 1

при получении значений пикселей не используйте % в css используйте px

let btn = document.getElementById("btn");


btn.onmousemove = function (e) {
  let rect = e.target.getBoundingClientRect();

  let x = e.clientX - rect.left;
  btn.style.setProperty("--x", x + "px");
};

:root {
  --x: 0%;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

.wrapper {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 75px);
}

button {
  height: 50px;
  min-height: 50px;
  min-width: 150px;
  border: none;
  position: relative;

  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) 100%
  );
 
  color: white;

  border-radius: 10px;

  padding: 0;
}
button span { width:100%; }
button:hover {
  background: none;
  cursor: pointer;
}

button::after {
  content: "";
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) var(--x),
    rgba(7, 22, 103, 1) 100%
  );

  height: 100%;
  width: 100%;
  border-radius: 10px;

  top: 0;
  left: 0;

  display: none;
  z-index: -1;
}

button:hover::after {
  display: inline;
}

span {
  margin: 0 30px;
}

  
    <link
      href="https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans&display=swap"
      rel="stylesheet"
    />
    
    <div class="wrapper">
      <button id="btn">Click here</button>
    </div>


 

Answer 2

Завершено наведение - теперь будет сохранена и последняя отслеживаемая позиция курсора.

let btn = document.getElementById("btn");

btn.onmousemove = function (e) {
  let rect = e.target.getBoundingClientRect();

  let x = e.clientX - rect.left;
  btn.style.setProperty("--x", x + "px");
};

:root {
  --x: 0%;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

.wrapper {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 75px);
}

button {
  height: 50px;
  min-height: 50px;
  min-width: 150px;
  border: none;
  position: relative;

  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) var(--x),
    rgba(7, 22, 103, 1) 100%
  );

  color: white;

  border-radius: 10px;

  padding: 0;
}

<link
      href="https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans&display=swap"
      rel="stylesheet"
    />

<div class="wrapper">
      <button id="btn">Click here</button>
    </div>