CSS-lab · Knoppen
Neon glow-knop
Een acid-lime neonknop met een meerlaagse glow die rustig ademt en bij hover gaat pulseren, terwijl het label subtiel flikkert.
- Beginner
- Pure CSS
- MIT-licentie
box-shadowtext-shadow@keyframesanimation:focus-visible
<button type="button" class="ng-btn">
<span class="ng-label">Ga live</span>
</button>/* Neon glow-knop - prefix .ng- */
.ng-btn {
--accent: #C6FF3D;
--glow: rgba(198, 255, 61, 0.6);
--glow-soft: rgba(198, 255, 61, 0.22);
--speed: 1.4s;
padding: 18px 42px;
font: 700 1rem/1 ui-monospace, Menlo, Consolas, monospace;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--accent);
background: transparent;
border: 2px solid var(--accent);
border-radius: 6px;
cursor: pointer;
/* Glow in lagen: strak, zacht en binnenin */
text-shadow: 0 0 6px var(--glow);
box-shadow:
0 0 4px var(--glow),
0 0 18px var(--glow-soft),
inset 0 0 10px var(--glow-soft);
animation: ng-breathe calc(var(--speed) * 2) ease-in-out infinite;
transition: background-color 0.3s;
}
/* Hover en focus: snellere, bredere pulse */
.ng-btn:hover,
.ng-btn:focus-visible {
background: rgba(198, 255, 61, 0.06);
animation: ng-pulse var(--speed) ease-in-out infinite;
}
.ng-label {
display: inline-block;
}
.ng-btn:hover .ng-label,
.ng-btn:focus-visible .ng-label {
animation: ng-flicker 2.6s linear infinite;
}
.ng-btn:focus-visible {
outline: 2px solid #F9F8F6;
outline-offset: 8px;
}
@keyframes ng-breathe {
50% {
box-shadow:
0 0 6px var(--glow),
0 0 28px var(--glow-soft),
inset 0 0 14px var(--glow-soft);
}
}
@keyframes ng-pulse {
0%, 100% {
box-shadow:
0 0 6px var(--glow),
0 0 24px var(--glow),
0 0 48px var(--glow-soft),
inset 0 0 14px var(--glow-soft);
}
50% {
box-shadow:
0 0 10px var(--glow),
0 0 40px var(--glow),
0 0 80px var(--glow-soft),
inset 0 0 22px var(--glow);
}
}
/* Onregelmatig flikkeren: alleen korte dips */
@keyframes ng-flicker {
0%, 18%, 21%, 23%, 61%, 64%, 100% {
opacity: 1;
}
19%, 22%, 62% {
opacity: 0.45;
}
}
@media (prefers-reduced-motion: reduce) {
.ng-btn,
.ng-btn:hover,
.ng-btn:focus-visible,
.ng-btn:hover .ng-label,
.ng-btn:focus-visible .ng-label {
animation: none;
}
.ng-btn:hover,
.ng-btn:focus-visible {
box-shadow:
0 0 8px var(--glow),
0 0 32px var(--glow),
inset 0 0 16px var(--glow-soft);
}
}Wat het is en waar je het gebruikt
De neon glow-knop doet denken aan een neonbuis in een donkere etalage. Een dunne acid-lime rand, een gloed die in lagen om de knop heen hangt en monospace-letters met wijde spatiering maken er een opvallende call-to-action van. In rust ademt de gloed langzaam. Bij hover of focus gaat hij sneller pulseren en flikkert het label af en toe, zoals een buis die net wordt aangezet.
De knop werkt het best op donkere achtergronden: in een donkere hero, een eventpagina, een gaming- of muziekcontext of als accent in een dark-mode interface. Gebruik hem spaarzaam, bij voorkeur voor de ene actie die echt moet opvallen.
Zo werkt het
- De gloed bestaat uit meerdere
box-shadow-lagen achter elkaar: een smalle, felle laag dicht op de rand, een bredere zachte laag eromheen en eeninset-schaduw die de binnenkant laat oplichten. - De tekst krijgt een eigen gloed met
text-shadow, zodat letters en rand bij elkaar horen. - De keyframes
ng-breathelaten de schaduw in rust langzaam groeien en krimpen. Bij:hoveren:focus-visiblewordt die animatie vervangen door het snellereng-pulse, dat de glow breder maakt. - Het flikkeren gebeurt in
ng-flicker: deopacityvan het label zakt alleen op een paar korte momenten in de tijdlijn even weg. Daardoor voelt het onregelmatig en niet mechanisch. - Kleuren met transparantie staan in aparte variabelen (
--glowen--glow-soft), omdat je inbox-shadowniet zomaar de dekking van een hexkleur kunt veranderen.
Aanpassen
Op .ng-btn staan de variabelen. --accent is de kleur van rand en tekst. --glow en --glow-soft zijn dezelfde kleur met lagere dekking, voor de binnenste en buitenste gloed. Wil je een violette of cobaltblauwe neon, verander dan alle drie. Met --speed stel je het tempo van de pulse in. De ademhaling in rust duurt automatisch twee keer zo lang. Voor een rustigere knop kun je de animatie in rust ook helemaal weghalen.
Toegankelijkheid en browsersupport
Het is een echte <button> met leesbare tekst. Acid lime op bijna-zwart heeft een zeer hoog contrast. Omdat het flikkeren alleen de dekking verandert en nooit volledig uitgaat, blijft het label altijd leesbaar. De flikkering is bovendien traag en onregelmatig, ver onder de frequenties waar je bij flitsende content op moet letten. Focus krijgt een off-white outline met outline-offset. In het prefers-reduced-motion-blok staan alle animaties uit en blijft er alleen een statische, sterkere gloed over bij hover. Meerlaagse box-shadow en keyframes werken in alle actuele browsers.
Verder lezen
Lees in ons artikel over microinteracties in UX wanneer zulke subtiele bewegingen helpen en wanneer ze juist afleiden. Of ontdek hoe we interactief webdesign en animaties inzetten.
Meer knoppen