Button Proximity With JavaScript And CSS3

A button proximity effect written in JavaScript and CSS3 that highlights buttons when you’re about to hovering over them.

How to use it:

Create the proximity buttons.

<a id="b1" class="proxim-button">CSS</a>
<a id="b2" class="proxim-button">SCRIPT</a>
<a id="b3" class="proxim-button">.COM</a>

The main JavaScript to apply the proximity effect to the buttons.

const proximityManager = new ProximityManager();
window.addEventListener( "mousemove", function( e ) {
    let proxims = document.getElementsByClassName( "proxim-button" );
    Array.prototype.forEach.call( proxims, function( proxim ) {
        proximityManager.effect( proxim, {
            x: e.x,
            y: e.y
        } );
    } );
} );
function ProximityManager() {
    this.color = "rgba( 255, 255, 255, 0.3 )";
    this.radius = 80;
}
ProximityManager.prototype.effect = function( proxim, pos ) {
    let rect = proxim.getBoundingClientRect();
    let x = pos.x - rect.left; // offset from corner
    let y = pos.y - rect.top;
    proxim.style.background = "radial-gradient( circle at " + x + "px " + y + "px, " + this.color + " 0%, transparent " + this.radius + "px)";
}