<h3>In && Out Direction Aware Hover Fill</h3>
<button href="#">Yellow Button</button>
<button href="#">Green Button</button>
<button href="#">Pink Button</button>

<!--Also works with Tap > Direction In based on tap position; Direction Out based on tap position of the NEXT button tapped  !-->

@import url(https://fonts.googleapis.com/css?family=Ubuntu:700);
* {
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  box-sizing: border-box; 
  overflow:auto;
}

body {
  font: 2vw 'Ubuntu', sans-serif;
  width:100%;
  height: 100%;
  background:hsla(350, 55%, 48%, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: linear-gradient(to right top, hsla(0, 15%,15%, 0.5), hsla(0, 15%, 5%,1));
  background-image:-moz-linear-gradient(to right top, hsla(0, 15%,15%, 0.5), hsla(0, 15%, 5%,1));
}
h3{
  color: hsla(0, 0%, 55%, 1);
  text-align:center;
  margin-top:5%;  
  text-shadow:1px 1px hsla(0,5%,5%,.1), 2px -2px hsla(0,5%,5%,.1);
}
button{
    display: block;
    text-transform: uppercase;
    position:relative;
    margin: 5% auto;
    width:15%;
    cursor: pointer;
    color: hsla(0, 0%, 55%, 1);
    background: transparent;
    border: 1px solid hsla(0, 0%, 25%, .5);
    text-align: center;
    font-size: 1.5vw;
    font-weight: bold;
    padding: 1.5vw 0;
    text-shadow:1px 1px hsla(0,5%,5%,.3), 2px 2px hsla(0,5%,5%,.3);
    overflow:hidden;
    transition: all 0.3s ease-in;
}
button:hover{
  color:hsla(0, 0%, 15%, .5);
}
button:focus{
  color:hsla(0, 0%, 5%, 1);
}
.blob{
  z-index:-1;
  position:absolute;
  width:2px;
  height:2px;
  margin-left: 0;
  margin-top: 0;
  background:hsla(51, 95%, 65%, 1);
  border-radius: 50%;
  border-color:hsla(51, 95%, 65%, 1);
  border-width: 1px;
  border-style: solid;
  transition: border-width 0.7s ease-in-out,margin-left 0.7s ease-in-out,margin-top 0.7s ease-in-out;
}
.expand{
  border-color:hsla(51, 95%, 65%, 1);
  border-width: 300px;
  border-style: solid;
  transition: border-width 0.7s ease-in-out,margin-left 0.7s ease-in-out,margin-top 0.7s ease-in-out;
  margin-left:-300px;
  margin-top:-300px;
}
.green{
  border-color:hsla(152, 95%, 35%, 1);
}
.pink{
  border-color:hsla(324, 85%, 40%, 1);
}

var ofs, x, y;
$('button').on('mouseenter', function(e){
  ofs = $(this).offset();
  x = (e.pageX - ofs.left);
  y = (e.pageY - ofs.top);
var name = $(this).text().toLowerCase().split(' ')[0];
  
$(this).append('<div class="blob ' + name + '" style="left:' + x + 'px; top: ' + y + 'px;"></div>');
  
var blob = $(this).find('.blob');
setTimeout(function(){
    blob.addClass("expand");
},20);
});

$('button').on('mouseleave', function(e){
  ofs = $(this).offset();
  x = (e.pageX - ofs.left);
  y = (e.pageY - ofs.top);
  var blob = $(this).find('.blob');
  blob.css({'left':x, 'top':y});
  blob.removeClass("expand");
  setTimeout(function(){
      blob.remove();
},800);
});