[Botão] Finch – v2

Adicione um Widget de HTML

Não precisa definir Classe

Cole esse código dentro do Widget de HTML

Código HTML/JS

      
<div class="glowbox glowbox-active">
  <div class="glowbox-animations">
    <div class="glowbox-glow"></div>
    <div class="glowbox-stars-masker">
      <div class="glowbox-stars"></div>
    </div>
  </div>

  <div class="glowbox-borders-masker">
    <div class="glowbox-borders"></div>
  </div>

  <a href="#">
    <div class="btn-cta-box">
      <div class="btn-cta">QUERO ME INSCREVER</div>
      <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async"
        data-src="https://zeph.com.br/wp-content/uploads/2023/12/seta-2.svg"
        class="arrow-icon"
        alt="Seta"
      />
    </div>
  </a>
</div>

Cole esse código no HTML (Avançado/Custom CSS)

Código CSS

      
.glowbox {
    isolation: isolate;
    overflow: hidden;
    border-radius: 999px;
    position: relative;
    width: 100%;
    max-width: 400px; /* fica responsivo até esse tamanho */
    margin: auto;
    --animation-speed: 2s;
  }

  .glowbox-active .glowbox-animations,
  .glowbox-active .glowbox-borders-masker {
    opacity: 1;
  }

  .glowbox-animations,
  .glowbox-borders {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
  }

  .glowbox-animations:before,
  .glowbox-borders:before {
    content: "";
    float: left;
    padding-top: 100%;
  }

  .glowbox-animations:after,
  .glowbox-borders:after {
    clear: both;
    content: "";
    display: block;
  }

  .glowbox-animations {
    opacity: 0;
    pointer-events: none;
    transition: 1s ease opacity;
  }

  .glowbox-animations * {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .glowbox-borders,
  .glowbox-glow,
  .glowbox-stars {
    animation: borderTurn var(--animation-speed) infinite linear;
    background-image: conic-gradient(
      from 0 at 50% 50%,
      rgba(255, 136, 72, 1) 0deg,
      rgba(100, 132, 139, 0) 60deg,
      rgba(100, 132, 139, 0) 300deg,
      rgba(255, 198, 164, 1) 360deg
    );
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .glowbox-stars-masker {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E%0A");
    mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E%0A");
    mask-repeat: repeat;
    -webkit-mask-repeat: repeat;
    mask-size: auto;
    -webkit-mask-size: auto;
  }

  .glowbox-glow {
    filter: blur(8px);
    opacity: 0.12;
  }

  .glowbox-borders {
    animation-name: borderTurnWithTranslate;
  }

  .glowbox-borders-masker {
    border-radius: 999px;
    content: "";
    height: 100%;
    inset: 0;
    left: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    padding: 1px;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: 1s ease opacity;
    width: 100%;
    z-index: 1;
  }

  @keyframes borderTurn {
    0% {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes borderTurnWithTranslate {
    0% {
      transform: translate(-50%, -50%) rotate(0);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  /* ===== Container do Botão ===== */
  .btn-cta-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px 20px 10px 10px;
    background-color: #0F0D0D;
    background: linear-gradient(
      225deg,
      rgba(240, 242, 255, 0.24) 5%,
      rgba(255, 255, 255, 0.08) 43%,
      rgba(255, 255, 255, 0.03) 68%
    );
    border: 1px solid rgba(132, 117, 110, 0.26);
    border-radius: 100px;
    box-shadow: 23.9px 19.78px 82.49px 0px #00000094;
    flex-wrap: nowrap; /* impede quebra, mantendo texto e seta na mesma linha */
  }

  /* ===== Botão em si (texto) ===== */
  .btn-cta {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 14px 16px;
    background: linear-gradient(
      271.55deg,
      rgba(255, 136, 72, 0.44) 5.88%,
      rgba(204, 126, 58, 0) 50.22%,
      rgba(153, 73, 43, 0.44) 95.32%
    );
    border: 1px solid rgba(132, 117, 110, 0.55);
    border-radius: 100px;
    letter-spacing: 0.8px;
    font-family: "Aspekta", sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    box-shadow:
      -4.15px 10.39px 70.01px 0px #1B1111E3,
      -2.08px 4.15px 38.22px 0px #0F0F0F,
      -5.2px -4px 12.3px -10.4px #FFE5BC57 inset;
    overflow: hidden;
    /* não usar width: 100% para não empurrar a seta pra baixo */
  }

  /* Pseudo-elemento para o fundo com zoom e opacidade */
  .btn-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("https://i.ibb.co/HDT1CFq2/bg-button.webp")
      no-repeat center center/cover;
    border-radius: 100px;
    transform: scale(1.1);
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: -1;
  }

  /* Hover do botão: volta ao scale(1) e opacity(1) */
  .btn-cta:hover::before {
    transform: scale(1);
    opacity: 1;
  }

  /* ===== Ícone de seta ===== */
  .arrow-icon {
    display: inline-block; /* necessário para o transform funcionar */
    width: 18px;
    rotate: -90deg;
    height: auto;
    opacity: 1;
    transition: 0.5s ease all
  }
  
  .btn-cta-box:hover .arrow-icon {
    rotate: -140deg;
        transition: 0.5s ease all

  }


  /* ===== Responsividade ===== */
  @media (max-width: 480px) {
    .btn-cta-box {
      gap: 10px;
      padding: 8px 12px 8px 8px;
    }
    .btn-cta {
      font-size: 14px;
      padding: 12px 14px;
    }
    .arrow-icon {
            rotate: -90deg;
      width: 16px;
    }
  }

  @media (max-width: 320px) {
    .btn-cta-box {
      gap: 8px;
      padding: 6px 8px 6px 6px;
    }
    .btn-cta {
      font-size: 12px;
      padding: 10px 12px;
    }
    .arrow-icon {
      width: 14px;
    }
  }