Dynamic jQuery button glow with shadow

index.jade

div.container
  button.glow 
    a(href='https://gitter.im/FreeCodeCamp/FreeCodeCamp' target='_blank')  #FreeCodeCamp
  

script.js

$('.glow').mousemove(function() {
  var shadow = 5;
  var b = $(this);
  var pos = b.offset();
  var bgc = b.css('background-color');
  var x = Math.floor(event.pageX - pos.left);
  var y = Math.floor(event.pageY - pos.top);
  var offX = -Math.floor(((x-(b.width()/2))/100)*shadow);
  var offY = -Math.floor(((y-(b.height()/2))/100)*shadow);
  b.css({"background": "radial-gradient(ellipse farthest-corner at "+x+"px "+y+"px,  rgba(100,200,255,0.5) 0%, rgba(255,255,255,0) 100%)"+bgc,
        "box-shadow": offX+"px "+offY+"px 3px 3px #99c"});
});

style.css

body {
  margin: 0;
}

.info {
  display: block;
  background: #999;
  margin: 20px auto;
  text-align: center
    
}

.container {
  background: #ccc;
  width: 100%;
  height: 500px;
  padding-top: 20px;
}

.glow {
  height: 100px;
  width: 300px;
  display: block;
  background: linear-gradient(to bottom,   rgba(255,255,255,0.5), rgba(255,255,255,0));
  background-color: #474EFF;
  border-radius: 10px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 3px 3px #aad;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #CDF;
  position: relative;
  margin: 0 auto;
}
.glow a {
  text-decoration: none;
  color: #ddd;
}

vEaEyd.markdown

Dynamic jQuery button glow with shadow

A Pen by Cristián Berríos on CodePen.

License.