Volume Button

admin1234

Jan 31, 2026 7

Live Preview

Live Editor

<button class="sound-btn" id="btn">
  <div class="wave"></div>
  <span>Make Noise 🎤</span>
</button>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#020617;
  font-family:system-ui;
}

/* button */
.sound-btn{
  position:relative;
  width:220px;
  height:80px;
  border-radius:20px;
  background:#020617;
  color:#fff;
  font-size:18px;
  font-weight:600;
  border:2px solid #22d3ee;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 0 30px rgba(34,211,238,.6);
}

/* energy ring */
.sound-btn::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at center,
      rgba(34,211,238,.8),
      transparent 60%);
  opacity:.3;
  transform:scale(1);
  transition:.1s;
}

/* wave lines */
.wave{
  position:absolute;
  inset:-40%;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(139,92,246,.6) 0 2px,
      transparent 2px 8px
    );
  animation:drift 6s linear infinite;
  opacity:.4;
}

/* text */
.sound-btn span{
  position:relative;
  z-index:2;
}

@keyframes drift{
  from{transform:translateX(-50%)}
  to{transform:translateX(50%)}
}

Categories

Volume Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet