[Botão] Completando + Cortes laterais

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
      
/* Botão com borda animada — versão HLM (verdes)
   Como customizar rapidamente:
   - Troque as cores no bloco de vars abaixo
   - --border-color: degrade da borda animada
   - --bg: cor de fundo interna do botão
   - --color: cor do texto (fica branco no hover)
*/
.btn {
  /* ======= Vars do tema (verdes) ======= */
  --border-color: linear-gradient(-45deg, #0F4226, #009A46, #20BC67); /* degrade da borda */
  --border-width: .125em;     /* espessura da borda “recortada” */
  --curve-size: .5em;         /* raio dos cortes nos cantos */
  --blur: 30px;               /* não usado diretamente, mas útil p/ variantes */
  --bg: #000704;              /* fundo interno do botão (verde bem escuro) */
  --color: #eafff4;           /* cor do texto (claro) */

  color: var(--color);

  /* mantém a função/estrutura original */
  position: relative;         /* BG/efeitos presos ao botão */
  isolation: isolate;
  display: inline-grid;
  place-content: center;
  padding: .5em 1.5em;
  font-size: 17px;
  border: 0;
  text-transform: uppercase;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, .6);

  /* “recorte” do contorno com cantos curvos */
  clip-path: polygon(
    0% var(--curve-size),
    var(--curve-size) 0,
    100% 0,
    100% calc(100% - var(--curve-size)),
    calc(100% - var(--curve-size)) 100%,
    0 100%
  );

  transition: color 250ms;
}

.btn::after,
.btn::before {
  content: '';
  position: absolute;
  inset: 0; /* cobre toda a área do botão */
}

/* camada de borda animada (degrade em movimento) */
.btn::before {
  background: var(--border-color);
  background-size: 300% 300%;
  animation: move-bg7234 5s ease infinite;
  z-index: -2; /* atrás de tudo */
}

@keyframes move-bg7234 {
  0%   { background-position: 31% 0% }
  50%  { background-position: 70% 100% }
  100% { background-position: 31% 0% }
}

/* camada interna (fundo do botão) “recortada” para revelar a borda */
.btn::after {
  background: var(--bg);
  z-index: -1;
  clip-path: polygon(
    var(--border-width) calc(var(--curve-size) + var(--border-width) * .5),
    calc(var(--curve-size) + var(--border-width) * .5) var(--border-width),
    calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),
    calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),
    var(--border-width) calc(100% - var(--border-width))
  );
  transition: clip-path 500ms;
}

/* hover/focus: anima o “recorte” para destacar a borda */
.btn:where(:hover, :focus)::after {
  clip-path: polygon(
    calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
    calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * .5)),
    calc(100% - calc(var(--curve-size) + var(--border-width) * .5)) calc(100% - var(--border-width)),
    calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width))
  );
  transition: 200ms;
}

/* texto fica branco no destaque */
.btn:where(:hover, :focus) {
  color: #ffffff;
}