Aprenda a criar o meu Botão

✦ 1º Passo: Coloque este codigo dentro do elemento de HTLM

Copiar para a área de transferência
<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">O MEU BOTÃO : )</div>
      <img
        src="https://zeph.com.br/wp-content/uploads/2023/12/seta-2.svg"
        class="arrow-icon"
        alt="Seta"
      />
    </div>
  </a>
</div>

✦ 2º Passo: Coloque este codigo CSS dentro do Elemento HTLM

Copiar para a área de transferência
:root{
  --vio-0: #FDF3FD;  /* lilás bem claro */
  --vio-1: #A87CFF;  /* roxo/azulado */
  --vio-2: #EBBFFF;  /* lilás rosado */
  --vio-dk: #6E5AD8; /* roxo profundo p/ sombras */
}

/* ===== Container geral ===== */
.glowbox {
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  position: relative;
  width: 100%;
  max-width: 400px;
  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%;
}

/* ===== Anel giratório/estrelas agora em roxo/azul ===== */
.glowbox-borders,
.glowbox-glow,
.glowbox-stars {
  animation: borderTurn var(--animation-speed) infinite linear;
  background-image: conic-gradient(
    from 0 at 50% 50%,
    var(--vio-1) 0deg,
    rgba(100,132,139,0) 60deg,
    rgba(100,132,139,0) 300deg,
    var(--vio-2) 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");
  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");
  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; top: 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;
  transition: 1s ease opacity;
  width: 100%;
  z-index: 1;
}

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

/* ===== Caixa do botão ===== */
.btn-cta-box{
  display:flex; align-items:center; justify-content:center;
  gap:20px; padding:10px 20px 10px 10px;
  background: linear-gradient(225deg,
      rgba(253,243,253,0.24) 5%,
      rgba(255,255,255,0.08) 43%,
      rgba(255,255,255,0.03) 68%);
  border: 1px solid rgba(168,124,255,0.26);
  border-radius:100px;
  box-shadow: 23.9px 19.78px 82.49px 0px rgba(0,0,0,0.58);
  flex-wrap: nowrap;
}

/* ===== Botão (texto) em preto ===== */
.btn-cta{
  position:relative; z-index:2; text-align:center;
  padding:14px 16px;
  background: linear-gradient(
    271.55deg,
    rgba(168,124,255,0.44) 5.88%,
    rgba(168,124,255,0.00) 50.22%,
    rgba(235,191,255,0.44) 95.32%
  );
  border:1px solid rgba(168,124,255,0.55);
  border-radius:100px;
  letter-spacing:0.8px;
  font-family:"Aspekta", sans-serif;
  font-weight:600; font-size:15px;
  color:#000; /* <<< TEXTO PRETO */
  box-shadow:
    -4.15px 10.39px 70.01px 0px rgba(110,90,216,0.75),
    -2.08px 4.15px 38.22px 0px rgba(96,76,200,0.55),
    -5.2px -4px 12.3px -10.4px rgba(253,243,253,0.45) inset;
  overflow:hidden;
}

.btn-cta::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    var(--vio-0) 0%,
    var(--vio-1) 33%,
    var(--vio-0) 63%,
    var(--vio-2) 92%);
  border-radius:100px;
  transform: scale(1.1);
  opacity:0.8;
  transition: transform .3s ease, opacity .3s ease;
  z-index:-1;
}
.btn-cta:hover::before{ transform:scale(1); opacity:1; }

/* ===== Ícone ===== */
.arrow-icon{
  display:inline-block; width:18px; height:auto;
  rotate:-90deg; opacity:1; transition:.5s ease all;
}
.btn-cta-box:hover .arrow-icon{ rotate:-140deg; transition:.5s ease all; }

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

✦ 3º Passo: Me siga nas redes sociais, obrigado!