BUTTONS!

Check these buttons out!

Neon Glow Pulse

A button that pulses with a neon glow effect.

HTML

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

CSS

.btn-neon-pulse {
  background-color: #000;
  color: #00ff00;
  border: 2px solid #ffd700;
  padding: 10px 20px;
  font-family: 'Orbitron', sans-serif;
  box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; }
  50% { box-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00; }
  100% { box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; }
}

JavaScript

// No JavaScript needed for this button.

Cyber Glitch

Text glitches on hover for a futuristic look.

HTML

<button class="btn-glitch" data-text="Cyber Glitch">Cyber Glitch</button>

CSS

.btn-glitch {
  background-color: #000;
  color: #00ff00;
  border: 2px solid #ffd700;
  padding: 10px 20px;
  font-family: 'Orbitron', sans-serif;
  position: relative;
  transition: color 0.2s;
}

.btn-glitch:hover {
  color: transparent;
}

.btn-glitch:hover::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  color: #00ff00;
  animation: glitch 0.3s infinite;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

JavaScript

// No JavaScript needed for this button.

Ripple Effect

A button with a ripple animation on click.

HTML

<button class="btn-ripple">Ripple Effect</button>

CSS

.btn-ripple {
  position: relative;
  overflow: hidden;
  background-color: #000;
  color: #00ff00;
  border: 2px solid #ffd700;
  padding: 10px 20px;
  font-family: 'Orbitron', sans-serif;
}

.btn-ripple span {
  position: absolute;
  background: #00ff00;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  animation: ripple 0.6s linear;
  opacity: 0;
}

@keyframes ripple {
  0% { width: 0; height: 0; opacity: 0.5; }
  100% { width: 500px; height: 500px; opacity: 0; }
}

JavaScript

document.querySelectorAll('.btn-ripple').forEach(button => {
  button.addEventListener('click', function(e) {
    const span = document.createElement('span');
    span.style.left = `${e.offsetX}px`;
    span.style.top = `${e.offsetY}px`;
    this.appendChild(span);
    setTimeout(() => span.remove(), 600);
  });
});