Заливка элемента от точки наведения курсора

В просторах интернета наткнулся на сайт, где реализован интересный и довольно простой эффект наведения на кнопку. 

Живой пример:

Суть

1. Наводим курсор на кнопку
2. Высчитываем положение курсора относительно кнопки
3. Исходя из координатов курсора перемещается элемент
4. Видим эффект заполнения кнопки

html разметка

Я подключил библиотеку jquey, потому что мне так удобнее.

<a href="#" class="btn">
	<i class="fa fa-fire-extinguisher" aria-hidden="true"></i>
	<span class="btn_text">Наведите мышкой</span>
	<span class="btn_hover"></span>
</a>

<a href="#" class="btn">
	<i class="fa fa-check" aria-hidden="true"></i>
	<span class="btn_text">В разные места</span>
	<span class="btn_hover"></span>
</a>

<a href="#" class="btn">
	<i class="fa fa-heart-o" aria-hidden="true"></i>
	<span class="btn_text">И еще разок</span>
	<span class="btn_hover"></span>
</a>

css

.btn
{
    display: inline-block;
    padding: 12px 55px;
    font-size: 20px;
    line-height: 1.42857143;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    border: 2px solid rgb(255, 255, 255);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn:hover .btn_hover
{
	width: 1000px;
	height: 1000px;	
}

.btn .btn_hover
{
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #50e3c2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: width .6s, height .6s, background-color .4s;
}

javascript

$(function(){
  $(".btn").mouseover(function(e){
    // положение элемента
    var pos = $(this).offset();
    var elem_left = pos.left;
    var elem_top = pos.top;
    // положение курсора внутри элемента
    var Xinner = e.pageX - elem_left;
    var Yinner = e.pageY - elem_top;
		$(this).find(".btn_hover").css({
			"left":Xinner,
			"top":Yinner
		})
  });
});

Вот и все. Ничего сложного.

Таким образом мы получили интересный и просто эффект наведения курсора на кнопку под средствами css3 и javascript.