Neon CTA Hero — Playground

{CF} CodeFronts Back to CSS Hero Sections Neon CTA Hero Pure CSS

Edit any tab — preview updates live

.hs-neo {
  position: relative;
  width: 100%;
  min-height: clamp(220px, 30vh, 100vh);
  padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px);
  background: #06060c;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: system-ui, sans-serif; color: #f0eeff; text-align: center;
}
.hs-neo-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(124,108,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,108,255,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 80%);
}
.hs-neo-c {
  position: relative; z-index: 1;
  max-width: 600px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hs-neo-eye {
  font-family: monospace; font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 0.16em; color: #2eb88a;
}
.hs-neo h1 {
  margin: 0; font-size: clamp(20px, 4.5vw, 50px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  color: #fff;
}
.hs-neo h1 em {
  font-style: italic; font-weight: 800;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hs-neo p { margin: 0; font-size: clamp(11px, 1.5vw, 15px); color: #b8b6d4; }
.hs-neo-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 8px;
  padding: 12px 24px; border-radius: 8px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  font-size: clamp(12px, 1.6vw, 15px); font-weight: 700;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.5),
    0 0 24px rgba(124,108,255,0.45),
    0 0 48px rgba(124,108,255,0.25);
  animation: hs-neo-pulse 2.6s ease-in-out infinite;
  transition: transform 0.15s;
}
.hs-neo-cta:hover { transform: translateY(-2px); animation: none; }
.hs-neo-arrow { transition: transform 0.2s; }
.hs-neo-cta:hover .hs-neo-arrow { transform: translateX(4px); }
.hs-neo-meta { font-size: clamp(9px, 1.2vw, 11px); color: #b8b6d4; margin-top: 4px; }
@keyframes hs-neo-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(167,139,250,0.5), 0 0 24px rgba(124,108,255,0.45), 0 0 48px rgba(124,108,255,0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(167,139,250,0.7), 0 0 36px rgba(124,108,255,0.7),  0 0 72px rgba(124,108,255,0.4); }
}
@media (prefers-reduced-motion: reduce) { .hs-neo-cta { animation: none; } }

Live preview Ready