[Botão] Pulsar Hover V2

Adicione um Widget de botão no Elementor

Defina a Classe no botão : btn

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

.btn{
  /* ===== Tokens editáveis ===== */
  --bg: linear-gradient(90deg, #00FF73, #68FFAC); /* defina a cor/gradiente do BG aqui */
  --splash: #00FF73;                               /* cor que “expande” no hover */
  
  text-transform: uppercase;
  display: inline-block;
  position: relative;   /* necessário p/ posicionar o ::after */
  isolation: isolate;   /* mantém z-index do ::after por trás */
  border-radius: 6em !important;      /* defina o arredondamento aqui */
  background: var(--bg) !important;   /* fundo do botão */
  transition: all .5s;
}

.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 20px #18181840;  /* defina a sombra do hover aqui */
}

.btn::after{
  /* camada que expande e some no hover */
  content: "";
  position: absolute; inset: 0;
  z-index: -1;                         /* fica atrás do botão */
  border-radius: 100px !important;     /* ajuste se quiser mais/menos arredondado */
  background-color: var(--splash);     /* defina a cor que irá expandir */
  transition: all .8s;
}

.btn:hover::after{
  transform: scaleX(1.2) scaleY(1.4);  /* defina o quanto irá expandir */
  opacity: 0;
}