Pulse Reactor
A radar-style action bar — clicking any button activates it AND emits a circular shockwave that ripples outward across the whole bar. Active button stays lit.
Pulse Reactor the 13th of 22 designs in the 22 CSS Button Group Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="cbgp-pulse" role="toolbar" aria-label="Terminal actions"> <input type="radio" name="cbgp-pulse" id="cbgp-pulse-1" /> <label for="cbgp-pulse-1">RUN</label> <input type="radio" name="cbgp-pulse" id="cbgp-pulse-2" checked /> <label for="cbgp-pulse-2">STOP</label> <input type="radio" name="cbgp-pulse" id="cbgp-pulse-3" /> <label for="cbgp-pulse-3">CLEAR</label> <input type="radio" name="cbgp-pulse" id="cbgp-pulse-4" /> <label for="cbgp-pulse-4">EXPORT</label> </div>
.cbgp-pulse {
display: inline-flex; gap: 4px;
padding: 6px;
background: radial-gradient(ellipse at 50% 0%, #0a1a3a 0%, #050810 60%);
border: 1px solid rgba(0,255,224,0.18);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.cbgp-pulse input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-pulse label {
padding: 9px 16px;
background: rgba(0,255,224,0.04);
border: 1px solid rgba(0,255,224,0.18);
color: rgba(0,255,224,0.7);
font: 800 10px/1 ui-monospace, monospace;
letter-spacing: 0.16em;
cursor: pointer;
border-radius: 3px;
position: relative;
transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.25s;
}
.cbgp-pulse label::before {
content: '';
position: absolute; inset: 50% 50%;
border-radius: 50%;
border: 2px solid #00ffe0;
opacity: 0;
pointer-events: none;
}
.cbgp-pulse label:hover { background: rgba(0,255,224,0.08); color: #c8fffa; border-color: rgba(0,255,224,0.4); }
.cbgp-pulse input:checked + label {
background: linear-gradient(180deg, #00ffe0, #00b8a8);
color: #001f1c;
border-color: #00ffe0;
box-shadow: 0 0 18px rgba(0,255,224,0.55), inset 0 -2px 4px rgba(0,0,0,0.2);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.cbgp-pulse input:checked + label::before { animation: cbgp-pulse-out 0.7s cubic-bezier(.3,1,.5,1); }
@keyframes cbgp-pulse-out {
0% { inset: 50% 50%; opacity: 0.85; }
100% { inset: -50% -50%; opacity: 0; }
}
.cbgp-pulse input:focus-visible + label { outline: 2px solid #ff5af1; outline-offset: 2px; }