weekly challenge-neon glow button with bubbles

858 9 Text Effects mzierenberg1 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

weekly challenge-neon glow button with bubbles

body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #050408;
      /* Multi-color ambient wall glow + dark brick wall texture */
      background-image: 
        radial-gradient(circle at 35% 50%, rgba(255, 102, 0, 0.25) 0%, transparent 55%),
        radial-gradient(circle at 70% 50%, rgba(0, 240, 255, 0.2) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 170, 0.18) 0%, rgba(5, 4, 8, 0.96) 72%),
        linear-gradient(335deg, #0e0b14 23px, transparent 23px),
        linear-gradient(155deg, #0e0b14 23px, transparent 23px),
        linear-gradient(335deg, #09070d 23px, transparent 23px),
        linear-gradient(155deg, #09070d 23px, transparent 23px);
      background-size: 100% 100%, 100% 100%, 100% 100%, 58px 58px, 58px 58px, 58px 58px, 58px 58px;
      background-position: center, center, center, 0px 2px, 4px 35px, 29px 31px, 34px 6px;
      overflow: hidden;
      cursor: pointer;
    }

/* Wrapper with multi-color ambient wall cast */
    .sign-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 6px;
      border-radius: 30px;
      box-shadow:
        -25px 0 80px rgba(255, 0, 170, 0.45),
        25px 0 80px rgba(0, 240, 255, 0.45),
        0 0 140px rgba(255, 102, 0, 0.4);
      transition: transform 0.15s ease;
    }

.sign-wrapper:active {
      transform: scale(0.98);
    }

/* Spinning multi-color neon energy beam around the frame */
    .sign-wrapper::before {
      content: "";
      position: absolute;
      inset: -5px;
      border-radius: 33px;
      background: conic-gradient(
        from var(--angle, 0deg),
        #ff6a00,
        #ff00aa,
        #7000ff,
        #00f0ff,
        #00ff88,
        #ffea00,
        #ff6a00
      );
      animation: rotate-glow 3.5s linear infinite;
      z-index: 0;
      filter: blur(4px);
    }

/* Outer electric cyan glass tube */
    .neon-outer-border {
      position: relative;
      z-index: 1;
      padding: 13px;
      background: rgba(8, 6, 14, 0.92);
      border: 4px solid #e0ffff;
      border-radius: 26px;
      box-shadow:
        0 0 10px #fff,
        0 0 22px #00f0ff,
        0 0 48px #00b8ff,
        inset 0 0 14px #00f0ff;
    }

/* Inner hot magenta glass tube */
    .neon-inner-border {
      padding: clamp(1.5rem, 3.8vw, 2.8rem) clamp(2.4rem, 6vw, 5rem);
      border: 3px solid #ffe6f7;
      border-radius: 16px;
      box-shadow:
        0 0 8px #fff,
        0 0 18px #ff00aa,
        inset 0 0 12px #fff,
        inset 0 0 26px #ff00aa,
        inset 0 0 55px #9d00ff;
    }

/* Bright orange text */
    .neon-sign {
      font-family: 'Quicksand', sans-serif;
      font-size: clamp(2.6rem, 8.5vw, 6.5rem);
      font-weight: 600;
      letter-spacing: 0.07em;
      color: #ffffff;
      text-shadow:
        0 0 4px #ffffff,
        0 0 10px #ffffff,
        0 0 20px #ffbe0b,
        0 0 38px #ff7b00,
        0 0 65px #ff5400,
        0 0 105px #ff0055,
        0 0 150px #ff00aa;
      animation: power-surge 3.5s infinite alternate;
      user-select: none;
    }

/* Glowing neon bubbles */
    .neon-bubble {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 10;
      transform: translate(-50%, -50%);
      animation: float-up var(--duration, 1.8s) ease-out forwards;
    }

@keyframes float-up {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3);
      }
      50% {
        opacity: 0.9;
      }
      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--drift-x, 0px)), calc(-50% - var(--rise-y, 180px))) scale(1.2);
      }
    }

@property --angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }

@keyframes rotate-glow {
      to {
        --angle: 360deg;
      }
    }

@keyframes power-surge {
      0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
        transform: scale(1);
        text-shadow:
          0 0 4px #ffffff,
          0 0 10px #ffffff,
          0 0 20px #ffbe0b,
          0 0 38px #ff7b00,
          0 0 65px #ff5400,
          0 0 105px #ff0055,
          0 0 150px #ff00aa;
      }
      20%, 55% {
        opacity: 0.88;
        transform: scale(0.997);
        text-shadow:
          0 0 2px #ffffff,
          0 0 14px #ff8800,
          0 0 32px #ff0077;
      }
    }
  </style>
</head>
<body>

<div class="sign-wrapper">
    <div class="neon-outer-border">
      <div class="neon-inner-border">
        <div class="neon-sign">mzierenberg</div>
      </div>
    </div>
  </div>

function createBubbleBurst(x, y) {
      const bubbleCount = 14;

for (let i = 0; i < bubbleCount; i++) {
        const bubble = document.createElement('div');
        bubble.classList.add('neon-bubble');

const size = Math.random() * 26 + 10;
        const color = neonColors[Math.floor(Math.random() * neonColors.length)];
        const driftX = (Math.random() - 0.5) * 180;
        const riseY = Math.random() * 180 + 90;
        const duration = Math.random() * 1 + 1.1;

bubble.style.width = `${size}px`;
        bubble.style.height = `${size}px`;
        bubble.style.left = `${x}px`;
        bubble.style.top = `${y}px`;
        bubble.style.border = `2px solid #ffffff`;
        bubble.style.background = `radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 65%)`;
        bubble.style.boxShadow = `0 0 8px #fff, 0 0 16px ${color}, inset 0 0 10px ${color}`;

bubble.style.setProperty('--drift-x', `${driftX}px`);
        bubble.style.setProperty('--rise-y', `${riseY}px`);
        bubble.style.setProperty('--duration', `${duration}s`);

document.body.appendChild(bubble);

bubble.addEventListener('animationend', () => {
          bubble.remove();
        });
      }
    }

document.addEventListener('click', (event) => {
      createBubbleBurst(event.clientX, event.clientY);
    });
  </script>

</body>
</html>

CSS

Comments 9

…

weekly challenge-neon glow button with bubbles

Recommended

Comments 9