Criando botão pegando "FOGO"

PEGANDO FOGO

✦ Aplique este CSS a um elemento de botão (não esqueça de definir a classe do botão para "botao-fogo"

Copiar para a área de transferência
.botao-fogo {
  background: linear-gradient(90deg, #fff200, #ffaa00, #ff6a00);
  background-size: 300% 300%;
  animation: fogoAnimado 5s linear infinite;
  color: #fff !important;
  font-weight: bold;
  padding-right: 30px;
  padding-left: 30px;
  position: relative;
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 15px rgba(255, 170, 0, 0.5);
  overflow: visible !important;
  z-index: 1;
}

@keyframes fogoAnimado {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gif-lateral {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.4s ease;
}

/* Flip horizontal ao hover */
.botao-fogo:hover ~ .gif-lateral {
  transform: translateY(-50%) scaleX(-1);
}

.botao-fogo {
  transition: transform 0.3s ease;
}

.botao-fogo:hover {
  transform: scale(0.95);
}

✦ Coloque um elemento de HTLM e coloque este código

Copiar para a área de transferência
<script>
  let gifUrl = "LINK DA GIF";
  setTimeout(function () {
    let botoes = document.getElementsByClassName("botao-fogo");
    for (let botao of botoes) {
      if (!botao.parentElement.querySelector(".gif-lateral")) {
        let gif = document.createElement("img");
        gif.src = gifUrl;
        gif.className = "gif-lateral";
        botao.parentElement.style.position = "relative"; // garante contexto
        botao.parentElement.appendChild(gif);
      }
    }
  }, 100);
</script>

✦ Baixe a GIF abaixo e copie o LINK dela ao upar no seu elementor/wordpress (pode usar outras GIFs se quiser)

✦ Me siga nas redes sociais, obrigado!

Instagram Youtube