Generate Glow Button<

aartigoyal

Jan 29, 2026 3

Live Preview

Live Editor

<div class="btn-wrap">
  <button class="generate-btn">
    <span class="icon">⚡</span>
    <span class="text">Generate</span>
  </button>
</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#0b0612;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* glow wrapper */
.btn-wrap{
  position:relative;
  border-radius:999px;
  padding:2px;
  background:linear-gradient(
    120deg,
    #6a5cff,
    #8b5cf6,
    #ec4899
  );
  box-shadow:0 0 40px rgba(168,85,247,.45);
}

/* glow blur */
.btn-wrap::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background:inherit;
  filter:blur(28px);
  opacity:.7;
  z-index:-1;
}

/* button */
.generate-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 44px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background:linear-gradient(
    120deg,
    #5b5cff,
    #8b5cf6,
    #f0abfc
  );
  color:#fff;
  font-size:26px;
  font-weight:600;
  overflow:hidden;
}

/* sparkle dots */
.generate-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(#ffffff66 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.25;
}

/* icon */
.icon{
  font-size:28px;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.6));
  z-index:1;
}

.text{
  z-index:1;
}

Categories

Generate Glow Button<

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet

Categories

Generate Glow Button&lt;

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet

Generate Glow Button<