Back to CSS Button Groups Pulse Reactor Pure CSS
Share
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; }