Fire Animated

admin1234
Jan 30, 2026 3
Live Preview

Live Editor

<div class="fire-wrap">
  <button class="fire-btn">Connect Now</button>
</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#0b0b0b;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* wrapper */
.fire-wrap{
  position:relative;
  padding:4px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    #ff3c00,
    #ff8c00,
    #ffd000,
    #ff3c00
  );
  background-size:300% 300%;
  animation:fireMove 2.5s linear infinite;
}

/* fire glow */
.fire-wrap::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:999px;
  background:inherit;
  filter:blur(35px);
  opacity:.9;
  z-index:-1;
}

/* inner button */
.fire-btn{
  padding:22px 64px;
  border-radius:999px;
  border:none;
  background:#111;
  color:#fff;
  font-size:26px;
  font-weight:600;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  letter-spacing:.4px;
}

/* flame flicker */
.fire-btn::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,120,0,.35), transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(255,200,0,.35), transparent 40%);
  animation:flicker 1.4s ease-in-out infinite;
}

/* hover boost */
.fire-wrap:hover{
  filter:brightness(1.2);
  transform:scale(1.06);
  transition:.3s;
}

@keyframes fireMove{
  0%{background-position:0%}
  100%{background-position:300%}
}

@keyframes flicker{
  0%{opacity:.4}
  50%{opacity:1}
  100%{opacity:.6}
}
Categories

Fire Animated

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
