Shimmer Wave Button

aartigoyal

Jan 29, 2026 2

Live Preview

Live Editor

<button class="wave-btn">
  Shimmer Button
</button>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#0b0b0b;
  font-family:Arial, sans-serif;
}

.wave-btn{
  position:relative;
  padding:16px 38px;
  font-size:16px;
  font-weight:600;
  color:#fff;
  background:#111;
  border:none;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  letter-spacing:.5px;
}

.wave-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:200%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.15),
    transparent
  );
  animation:wave 2.4s ease-in-out infinite;
}

.wave-btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:16px;
  background:linear-gradient(120deg,#ff6a00,#ff0066,#6a5cff);
  z-index:-1;
  filter:blur(6px);
  opacity:.8;
}

@keyframes wave{
  0%{transform:translateX(0);}
  50%{transform:translateX(50%);}
  100%{transform:translateX(100%);}
}

Categories

Shimmer Wave Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet