Classes utilizadas
Clique aqui <span class="circulo"></span>
Código CSS
.botaoEfeito{
position: relative;
overflow: hidden;
border-radius: 12px;
}
.circulo{
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255 255 255 / .3);
border-radius: 50%;
transition: width .4s, height .4s;
}
.botaoEfeito:hover .circulo{
width: 300px;
height: 300px;
}
Código Widget HTML
<script>
let botaoEfeito = document.querySelector(".botaoEfeito");
let circulo = document.querySelector(".circulo");
botaoEfeito.addEventListener("mousemove", function(e){
let distanciaBotao = this.getBoundingClientRect();
let x = e.clientX - distanciaBotao.left;
let y = e.clientY - distanciaBotao.top;
circulo.style.top = `${y}px`;
circulo.style.left= `${x}px`;
})
</script>
