oiljin/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

	<style>
		.wrp{
			text-align: center;
		    margin: 50px auto 0;
		}

		.b-btn {
		    font-size: 15px;
		    line-height: 1;
		    font-weight: bold;
		    font-style: normal;
		    color: #2068fb;
		    border: 1px solid #2068fb;
		    background-color: #fff;
		    border-radius: 3px;
		    padding: 22px;
		    text-transform: uppercase;
		    cursor: pointer;
		    position: relative;
		    overflow: hidden;
		    z-index: 1;
		    display: inline-block;
	    	text-decoration: none;
	        transition: all 0.3s;
		}

		.b-btn:hover,
		.b-btn:active {
		    color: #fff;
		    outline-width: 0;
		}

		.b-btn span {
		    position: absolute;
		    display: block;
		    width: 0;
		    height: 0;
		    border-radius: 50%;
		    background: #2068fb;
		    -webkit-transform: translate(-50%, -50%);
		    transform: translate(-50%, -50%);
		    -webkit-transition: width 0.4s, height 0.4s;
		    transition: width 0.4s, height 0.4s;
		    z-index: -1;
		}

		.b-btn:hover span,
		.b-btn:active span {
		    width: 500px;
		    height: 500px;
		}
	</style>
</head>
	<body>

		<div class="wrp">
			<a href="" class="b-btn">Кнопка с заливкой <span></span></a>
		</div>

		<script>
			$('.b-btn')
		        .on('mouseenter', function(e) {
		            var parentOffset = $(this).offset(),
		                relX = e.pageX - parentOffset.left,
		                relY = e.pageY - parentOffset.top;
		            $(this).find('span').css({top:relY, left:relX})
		        })
		        .on('mouseout', function(e) {
		            var parentOffset = $(this).offset(),
		                relX = e.pageX - parentOffset.left,
		                relY = e.pageY - parentOffset.top;
		            $(this).find('span').css({top:relY, left:relX})
		        });
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

	<style>
	.wrp{
	text-align: center;
	margin: 50px auto 0;
	}

	.b-btn {
	font-size: 15px;
	line-height: 1;
	font-weight: bold;
	font-style: normal;
	color: #2068fb;
	border: 1px solid #2068fb;
	background-color: #fff;
	border-radius: 3px;
	padding: 22px;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	z-index: 1;
	display: inline-block;
	text-decoration: none;
	transition: all 0.3s;
	}

	.b-btn:hover,
	.b-btn:active {
	color: #fff;
	outline-width: 0;
	}

	.b-btn span {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: #2068fb;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: width 0.4s, height 0.4s;
	transition: width 0.4s, height 0.4s;
	z-index: -1;
	}

	.b-btn:hover span,
	.b-btn:active span {
	width: 500px;
	height: 500px;
	}
	</style>
	</head>
	<body>

	<div class="wrp">
	<a href="" class="b-btn">Кнопка с заливкой <span></span></a>
	</div>

	<script>
	$('.b-btn')
	.on('mouseenter', function(e) {
	var parentOffset = $(this).offset(),
	relX = e.pageX - parentOffset.left,
	relY = e.pageY - parentOffset.top;
	$(this).find('span').css({top:relY, left:relX})
	})
	.on('mouseout', function(e) {
	var parentOffset = $(this).offset(),
	relX = e.pageX - parentOffset.left,
	relY = e.pageY - parentOffset.top;
	$(this).find('span').css({top:relY, left:relX})
	});
	</script>
	</body>
	</html>