Круговая пульсация на элементах

Пример:

Ссылка

Блочный элемент

HTML:

<a class="circular" href="#">
	<span></span>
	<p>Ссылка</p>
</a>

<div class="circular">
	<span></span>
	<p>Блочный элемент</p>
</div>

<button class="circular">
	<span></span>
	<p>Кнопка button</p>
</button>

<p>Ссылка</p>

</a>

<p>Блочный элемент</p>

</div>

<p>Кнопка button</p>

</button>

CSS:

.circular {
	position: relative;
	display: block;
	color: #fff;
	background: #337AB7;
	overflow: hidden;
	margin: 10px;
	border: none;
	padding: 0 30px;
	text-decoration: none;
	text-align: center;
	width: 100%;
}
.circular p {
	position: relative;
	z-index: 5;
	transition: color 0.6s;
	font-size: 24px;
	line-height: 50px;	
}
.circular:hover p {
	color: #337AB7;
}
.circular span {
	border-radius: 100%;
	position: absolute;
	display: block;
	content: "";
	z-index: 0;
	width: 0;
	height: 0;
	background: #fff;
	transform: translate(-50%, -50%);
	transition: width 0.6s, padding-top 0.6s;
}
.circular:hover span {
	width: 250%;
	padding-top: 250%;
}

.circular {

position: relative;

display: block;

color: #fff;

background: #337AB7;

overflow: hidden;

margin: 10px;

border: none;

padding: 0 30px;

text-decoration: none;

text-align: center;

width: 100%;

}

.circular p {

position: relative;

z-index: 5;

transition: color 0.6s;

font-size: 24px;

line-height: 50px;

}

.circular:hover p {

color: #337AB7;

}

.circular span {

border-radius: 100%;

position: absolute;

display: block;

content: "";

z-index: 0;

width: 0;

height: 0;

background: #fff;

transform: translate(-50%, -50%);

transition: width 0.6s, padding-top 0.6s;

}

.circular:hover span {

width: 250%;

padding-top: 250%;

}

JavaScript:

const elements = document.querySelectorAll(".circular");
const elements_span = [];
elements.forEach((element, index) => {
	if (!elements_span[index])
	elements_span[index] = element.querySelector("span");
	element.addEventListener("mouseover", e => {
		elements_span[index].style.left = e.pageX - element.getBoundingClientRect().left - window.scrollX + "px";
		elements_span[index].style.top = e.pageY - element.getBoundingClientRect().top - window.scrollY + "px";
	});
	element.addEventListener("mouseout", e => {
		elements_span[index].style.left = e.pageX - element.getBoundingClientRect().left - window.scrollX + "px";
		elements_span[index].style.top = e.pageY - element.getBoundingClientRect().top - window.scrollY + "px";
	});
})

const elements = document.querySelectorAll(".circular");

const elements_span = [];

elements.forEach((element, index) => {

if (!elements_span[index])

elements_span[index] = element.querySelector("span");

element.addEventListener("mouseover", e => {

elements_span[index].style.left = e.pageX - element.getBoundingClientRect().left - window.scrollX + "px";

elements_span[index].style.top = e.pageY - element.getBoundingClientRect().top - window.scrollY + "px";

});

element.addEventListener("mouseout", e => {