Back to CSS Button Hover Effects Neon Pulse Pure CSS
Share
HTML
<button class="bhe-04__btn">NEON</button>
CSS
.bhe-04__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: inherit;
}

.bhe-04__btn {
  color: #2ecc8a;
  border: 2px solid #2ecc8a;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.3s;
}
.bhe-04__btn:hover {
  background: rgba(46, 204, 138, 0.1);
  animation: neonpulse 1.2s ease-in-out infinite;
}
@keyframes neonpulse {
  0%,
  100% {
    box-shadow:
      0 0 12px #2ecc8a,
      0 0 28px rgba(46, 204, 138, 0.35);
  }
  50% {
    box-shadow:
      0 0 20px #2ecc8a,
      0 0 50px rgba(46, 204, 138, 0.55),
      0 0 80px rgba(46, 204, 138, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-04__btn,
  .bhe-04__btn * {
    animation: none !important;
  }
}