Accent Button

HTML

CSS

JS

:root {
  --bg-color: #090a10;
  --btn-bg: #11131f;
  --btn-border: rgba(255, 255, 255, 0.08);
  --accent: #3b82f6;
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
.interactive-btn {
  position: relative;
  width: 220px;
  height: 56px;
  background-color: var(--btn-bg);
  border-radius: 14px;
  border: 1px solid var(--btn-border);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.2s;
}
.interactive-btn:active {
  transform: scale(0.97);
}

.interactive-btn:hover {
  border-color: rgba(59, 130, 246, 0.4);
}
.btn-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.btn-text {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  z-index: 2;
  pointer-events: none;
  text-transform: uppercase;
}

const btn = document.getElementById('action-button');
const canvas = document.getElementById('button-canvas');
const ctx = canvas.getContext('2d');
let particles = [];
let isHovered = false;
function setCanvasDimensions() {
  canvas.width = btn.clientWidth;
  canvas.height = btn.clientHeight;
}
function createParticle(x, y) {
  return {
    x: x,
    y: y,
    vx: (Math.random() - 0.5) * 2.5,
    vy: (Math.random() - 0.5) * 2.5,
    alpha: 1,
    size: Math.random() * 1.5 + 1
  };
}
function updateAndRender() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (isHovered && particles.length < 25) {
    particles.push(createParticle(Math.random() * canvas.width, Math.random() * canvas.height));
  }
  particles.forEach((p, idx) => {
    p.x += p.vx;
    p.y += p.vy;
    p.alpha -= 0.025;
    ctx.fillStyle = `rgba(59, 130, 246, ${p.alpha})`;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
    ctx.fill();
    if (p.alpha <= 0) {
      particles.splice(idx, 1);
    }
  });
  requestAnimationFrame(updateAndRender);
}
btn.addEventListener('mouseenter', () => { isHovered = true; });
btn.addEventListener('mouseleave', () => { isHovered = false; });
btn.addEventListener('touchstart', () => {
  isHovered = true;
  for(let i=0; i<15; i++) particles.push(createParticle(canvas.width/2, canvas.height/2));
}, { passive: true });
btn.addEventListener('touchend', () => { isHovered = false; });
window.addEventListener('resize', setCanvasDimensions);
setCanvasDimensions();
updateAndRender();

Ad #1

Ad #2