Buttons — CodeSnippetz

01 Pulse Effect — continuous ripple shadow draws the eye to a CTA

▶ live preview — always animating

HTML

<button class="pulse-btn">Click Me</button>

CSS

.pulse-btn {
  background-color: #10b981;
  color: white;
  border: none;
  padding: 14px 36px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

02 Slide Shine — a light streak sweeps across on hover

▶ live preview — hover to trigger

HTML

<button class="slide-btn">Slide Shine</button>

CSS

.slide-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg,#1e293b,#0f172a);
  color: white;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 14px 36px;
  border-radius: 8px;
  cursor: pointer;
}
.slide-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(to right,
    transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: 0.7s;
}
.slide-btn:hover::before { left: 130%; }

03 Gradient Wave — radial ripple expands from center on hover

▶ live preview — hover to trigger

HTML

<button class="wave-btn">Gradient Wave</button>

CSS

.wave-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,#7c3aed,#ec4899);
  color: white;
  border: none;
  padding: 14px 36px;
  border-radius: 999px;
  cursor: pointer;
}
.wave-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 300%; height: 300%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.3) 0%,transparent 60%);
  transform: translate(-50%,-50%) scale(0);
  transition: transform 0.6s ease;
}
.wave-btn:hover::after {
  transform: translate(-50%,-50%) scale(1);
}

04 Glass Morph — frosted glass effect using backdrop-filter blur

▶ live preview — hover to trigger

HTML

<button class="glass-btn">Glass Morph</button>

CSS

.glass-btn {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 14px 36px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.glass-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
}
/* place over a colourful background */

05 Liquid Slide — angled white sheen flows across on hover

▶ live preview — hover to trigger

HTML

<button class="liquid-btn">Liquid Slide</button>

CSS

.liquid-btn {
  position: relative;
  overflow: hidden;
  background: #2563eb;
  color: white;
  border: none;
  padding: 14px 36px;
  border-radius: 8px;
  cursor: pointer;
}
.liquid-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: rgba(255,255,255,0.2);
  transform: skewX(35deg);
  transition: 0.6s;
}
.liquid-btn:hover::before { left: 120%; }

06 3D Press — simulates physical depth with layered box-shadow

▶ live preview — hover & click

HTML

<button class="press-btn">3D Press</button>

CSS

.press-btn {
  background: #f59e0b;
  color: #1a1a1a;
  border: none;
  padding: 14px 36px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 0 #b45309,
    0 15px 20px rgba(0,0,0,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}
.press-btn:hover {
  transform: translateY(4px);
  box-shadow: 0 4px 0 #b45309,
    0 8px 12px rgba(0,0,0,0.3);
}
.press-btn:active {
  transform: translateY(8px);
  box-shadow: 0 0px 0 #b45309,
    0 4px 8px rgba(0,0,0,0.2);
}

07 Neon Glow — electric outline that intensifies on hover

▶ live preview — hover to trigger

HTML

<button class="neon-btn">Neon Glow</button>

CSS

.neon-btn {
  background: transparent;
  color: #00f7ff;
  border: 2px solid #00f7ff;
  padding: 14px 36px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 10px #00f7ff,
    inset 0 0 10px rgba(0,247,255,0.05);
  transition: box-shadow 0.3s ease;
}
.neon-btn:hover {
  box-shadow: 0 0 40px #00f7ff,
    0 0 80px rgba(0,247,255,0.3),
    inset 0 0 20px rgba(0,247,255,0.1);
}

08 Rotating Border — conic-gradient spins around the button continuously

▶ live preview — always animating

HTML

<button class="rotate-btn">Rotating Border</button>

CSS

.rotate-btn {
  position: relative;
  background: #0d1117;
  color: white;
  border: none;
  padding: 14px 36px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 0;
}
.rotate-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: conic-gradient(
    #00f7ff,#7c3aed,#ec4899,#00f7ff);
  z-index: -1;
  animation: rotateBorder 2s linear infinite;
}
.rotate-btn::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 7px;
  background: #0d1117;
  z-index: -1;
}
@keyframes rotateBorder {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

09 Ripple Click — Material-style ink ripple spawned at click position

▶ live preview — click to trigger

HTML

<button class="ripple-btn"
  onclick="addRipple(event,this)">
  Ripple Click
</button>

<!-- JS: -->
<script>
function addRipple(e, btn) {
  const r = btn.getBoundingClientRect();
  const s = Math.max(r.width, r.height);
  const x = e.clientX - r.left - s/2;
  const y = e.clientY - r.top - s/2;
  const el = document.createElement('span');
  el.className = 'ripple';
  el.style.cssText =
    `width:${s}px;height:${s}px;left:${x}px;top:${y}px`;
  btn.appendChild(el);
  setTimeout(() => el.remove(), 700);
}
</script>

CSS

.ripple-btn {
  position: relative;
  overflow: hidden;
  background: #0ea5e9;
  color: white;
  border: none;
  padding: 14px 36px;
  border-radius: 8px;
  cursor: pointer;
}
.ripple-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple-anim 0.6s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

10 Magnetic Outline — fill slides in from left, colour inverts on hover

▶ live preview — hover to trigger

HTML

<button class="magnetic-btn">
  Magnetic Outline
</button>

CSS

.magnetic-btn {
  position: relative;
  overflow: hidden;
  background: transparent;
  color: #5af0c4;
  border: 2px solid #5af0c4;
  padding: 14px 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.35s ease;
  z-index: 0;
}
.magnetic-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #5af0c4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: -1;
}
.magnetic-btn:hover { color: #0d0f14; }
.magnetic-btn:hover::before {
  transform: scaleX(1);
}

11 Gradient Border — multi-colour border via stacked pseudo-elements

▶ live preview — always visible

HTML

<button class="grad-border-btn">
  Gradient Border
</button>

CSS

.grad-border-btn {
  position: relative;
  background: #151820;
  color: #e4e8f0;
  border: none;
  padding: 14px 36px;
  border-radius: 10px;
  cursor: pointer;
  z-index: 0;
}
.grad-border-btn::before {
  content: '';
  position: absolute;
  inset: -2px; border-radius: 12px;
  background: linear-gradient(135deg,
    #5af0c4,#7b8cff,#ec4899);
  z-index: -1;
}
.grad-border-btn::after {
  content: '';
  position: absolute;
  inset: 2px; border-radius: 9px;
  background: #151820;
  z-index: -1;
}

12 Dots Loader — loading state button with bouncing indicator dots

▶ live preview — always animating

HTML

<button class="loader-btn">
  Processing
  <span class="dots-loader">
    <span></span><span></span><span></span>
  </span>
</button>

CSS

.loader-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1c2030;
  color: #e4e8f0;
  border: 1px solid #2a2f42;
  padding: 14px 36px;
  border-radius: 8px;
  cursor: pointer;
}
.dots-loader { display: flex; gap: 4px; }
.dots-loader span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5af0c4;
  animation: dotBounce 1.2s infinite ease-in-out;
}
.dots-loader span:nth-child(2) { animation-delay: 0.2s; }
.dots-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%,80%,100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}