HTML
<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>
CSS
.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; }