Cracked Lava

admin1234
Jan 30, 2026 4
Live Preview

Live Editor

<div class="lava-rock">
  <button class="lava-btn">Get Started</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;
}

/* outer rock */
.lava-rock{
  position:relative;
  padding:6px;
  border-radius:999px;
  background:#111;
  overflow:hidden;
}

/* glowing cracks */
.lava-rock::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(120deg, transparent 45%, rgba(255,120,0,.9) 48%, transparent 52%),
    linear-gradient(40deg, transparent 42%, rgba(255,200,0,.8) 45%, transparent 48%),
    linear-gradient(160deg, transparent 46%, rgba(255,80,0,.8) 49%, transparent 52%),
    linear-gradient(10deg, transparent 44%, rgba(255,160,0,.7) 47%, transparent 50%);
  filter:blur(6px);
  opacity:.7;
  animation:crackPulse 3.5s ease-in-out infinite;
}

/* inner glow bleed */
.lava-rock::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 30% 60%, rgba(255,90,0,.35), transparent 45%),
    radial-gradient(circle at 70% 40%, rgba(255,180,0,.35), transparent 50%);
  filter:blur(22px);
  animation:heatBreath 4s ease-in-out infinite;
}

/* button core */
.lava-btn{
  position:relative;
  z-index:1;
  padding:22px 68px;
  border-radius:999px;
  border:none;
  background:#0b0b0b;
  color:#fff;
  font-size:26px;
  font-weight:600;
  letter-spacing:.4px;
  cursor:pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    inset 0 0 20px rgba(255,120,0,.15);
}

/* hover = pressure increase */
.lava-rock:hover{
  transform:scale(1.06);
  transition:.3s;
}
.lava-rock:hover::before{
  opacity:1;
  filter:blur(4px);
}

/* animations */
@keyframes crackPulse{
  0%{opacity:.4}
  50%{opacity:1}
  100%{opacity:.6}
}

@keyframes heatBreath{
  0%{opacity:.4}
  50%{opacity:.9}
  100%{opacity:.5}
}
Categories

Cracked Lava

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
