Neon 3D Button

admin1234

Jan 31, 2026 5

Live Preview

Live Editor

<button class="neon-btn">Get Started</button>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#000;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* neon button */
.neon-btn{
  padding:20px 48px;
  border-radius:16px;
  background:linear-gradient(145deg,#0ea5e9,#6366f1);
  color:#fff;
  font-size:18px;
  font-weight:600;
  border:none;
  cursor:pointer;
  box-shadow:
    0 20px 40px rgba(0,229,255,.6),
    inset 0 -6px 12px rgba(0,0,0,.4);
  transition:.3s cubic-bezier(.22,1,.36,1);
}

/* hover */
.neon-btn:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:
    0 30px 70px rgba(0,229,255,.9),
    inset 0 -6px 12px rgba(0,0,0,.4);
}

/* active */
.neon-btn:active{
  transform:translateY(2px) scale(.98);
}

Categories

Neon 3D Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet