<a target="_blank" href="https://twitter.com/ispykenny" class="cta">
	<span class="link-text">
		@ispykenny on <div class="fa fa-twitter"></div>
	</span>
	<span class="hover-glow"></span>
</a>

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600');

body {
	text-align: center;
	margin-top: 4em;
	font-family: 'Montserrat';
}
.cta {
	border-radius: 5px;
  display: inline-block;
  padding: 1.8em 3em;
  position: relative;
  text-decoration: none;
  overflow: hidden;
	font-weight: 600;

  .link-text {
    position: relative;
    z-index: 5;
    color: white;
    font-weight: 600;
    opacity: 1;
    transform: translateY(-0px);
    display: block;
    transition: opacity 500ms, transform 200ms  ease;
  }

  &:after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    display: inline-block;
    width: 100%; height: 100%;
    background: #48A1EC;
    transition: transform 450ms  ease, background 500ms ease;
  }

}

.hover-glow {
  height: 150px;
  width: 150px;
  background: radial-gradient(circle closest-side, rgba(white, 0.4), transparent);
  position: absolute;
  border-radius: 100%;
  z-index: 2; top: -75px; left: -75px;
  opacity: 0;
}

var $cta = $('.cta');

function drawGlow(e) {
	var $t = $(this)
	var x = e.pageX - $t.offset().left; 
	var y = e.pageY - $t.offset().top; 
	$t.find('.hover-glow').css({
		'transform': 'translate('+x +'px,' + y  +'px)',
		'opacity': 1
	})
}

function killGlow() {
	var $t = $(this);
	$t.find('.hover-glow').css({
		'opacity' : 0
	})
}


$cta.on({
	'mousemove': drawGlow,
	'mouseleave': killGlow
})