27 CSS Button Hover Effects 10 / 27
Neon Pulse
Multi-layered box-shadows create a breathing neon glow that pulses rhythmically on hover.
The code
<button class="bhe-10__btn">NEON</button>
<button class="bhe-10__btn">NEON</button>.bhe-10__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
background: transparent;
color: inherit;
}
.bhe-10__btn {
color: #2ecc8a;
border: 2px solid #2ecc8a;
background: transparent;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.3s;
}
.bhe-10__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-10__btn,
.bhe-10__btn * {
animation: none !important;
}
}
.bhe-10__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
background: transparent;
color: inherit;
}
.bhe-10__btn {
color: #2ecc8a;
border: 2px solid #2ecc8a;
background: transparent;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.3s;
}
.bhe-10__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-10__btn,
.bhe-10__btn * {
animation: none !important;
}
}