I am currently troubleshooting an issue with a script that I wrote for my button. Interestingly, the code works flawlessly when I test it on CodePen, but I encountered an error when I attempted to run it in VSCode.
Even after trying to recreate the script in an external JS file, I still couldn't get it to work properly.
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');
};.btn {
position: relative;
display: inline-flex;
padding: 10px 30px;
background-color: #363636;
color: #fff;
text-decoration: none;
letter-spacing: 2px;
overflow: hidden;
}
.btn span {
position: relative;
z-index: 1;
}
.btn::before {
content: "";
position: absolute;
top: var(--y);
left: var(--x);
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background: #2196f3;
transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
width: 300px;
height: 300px;
}<a href="#" class="btn"><span>Button</span></a>Uncaught TypeError: Cannot set properties of null (setting 'onmousemove')
at js.js:2:23