Enhanced View More Button

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enhanced View More Button</title>
</head>
<body>
  <button class="viewmore-btn" id="viewMoreBtn">
    <span id="labelText">View More</span>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
    <div class="spinner" id="spinner"></div>
  </button>
</body>
</html>

:root {
  --bg: #0f172a;
  --accent1: #06b6d4;
  --accent2: #7c3aed;
  --accent3: #ec4899;
}

body {
  margin: 0;
  font-family: Inter, sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(124,58,237,0.15), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(6,182,212,0.15), transparent 50%),
    var(--bg);
}

.viewmore-btn {
  position: relative;
  padding: 18px 52px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  color: white;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.viewmore-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 35px 8px rgba(124, 58, 237, 0.8);
}

/* Shine sweep pseudo-element */
.viewmore-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
  transition: 0.5s;
}

.viewmore-btn:hover::before { left: 120%; }

/* SVG arrow animation */
.viewmore-btn svg {
  width: 26px;
  height: 26px;
  stroke: white;
  stroke-width: 2.5;
  transition: 0.3s ease;
  transform-origin: 50% 50%;
}

.viewmore-btn:hover svg {
  transform: translateX(8px) rotate(15deg);
  stroke: var(--accent1);
}

/* Loading spinner */
.spinner {
  position: absolute;
  right: 16px;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent1);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

const btn = document.getElementById('viewMoreBtn');
const spinner = document.getElementById('spinner');
const label = document.getElementById('labelText');
const arrow = btn.querySelector('svg');

btn.addEventListener('click', () => {
  label.textContent = 'Loading...';
  arrow.style.display = 'none';
  spinner.style.display = 'block';

  setTimeout(() => {
    spinner.style.display = 'none';
    arrow.style.display = 'block';
    label.textContent = 'View More';
  }, 2000);
});