Lava Button

admin1234
Jan 30, 2026 4
Live Preview

Live Editor

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

/* molten container */
.molten-wrap{
  position:relative;
  padding:5px;
  border-radius:999px;
  background:#000;
  overflow:hidden;
}

/* molten border layer */
.molten-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    conic-gradient(
      from 0deg,
      #ffb000,
      #ff5a00,
      #8a1c00,
      #ff9a00,
      #ff3d00,
      #ffb000
    );
  animation:moltenRotate 6s linear infinite;
  filter:blur(2px);
}

/* molten cracks */
.molten-wrap::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,120,0,.45), transparent 45%),
    radial-gradient(circle at 60% 70%, rgba(255,80,0,.4), transparent 50%),
    radial-gradient(circle at 80% 40%, rgba(255,200,80,.35), transparent 45%);
  animation:lavaPulse 3.5s ease-in-out infinite;
  filter:blur(14px);
}

/* inner button */
.molten-btn{
  position:relative;
  z-index:1;
  padding:22px 66px;
  border-radius:999px;
  border:none;
  background:#0a0a0a;
  color:#fff;
  font-size:26px;
  font-weight:600;
  letter-spacing:.4px;
  cursor:pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 30px rgba(255,80,0,.25);
}

/* hover = molten pressure */
.molten-wrap:hover{
  transform:scale(1.07);
  transition:.3s;
}

.molten-wrap:hover::before{
  filter:blur(4px);
}

/* animations */
@keyframes moltenRotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

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

Lava Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
