Back to CSS Button Groups Bio-Decision Pure CSS
Share
HTML
<div class="cbgp-bio" role="group" aria-label="Review decision">
  <button type="button" class="cbgp-bio-no">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
    Reject
  </button>
  <button type="button" class="cbgp-bio-yes">
    <svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="20 6 9 17 4 12" /></svg>
    Approve
  </button>
</div>
CSS
.cbgp-bio { display: inline-flex; gap: 10px; }
.cbgp-bio button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  cursor: pointer;
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  transition: transform 0.18s, box-shadow 0.25s;
}
.cbgp-bio svg { width: 14px; height: 14px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cbgp-bio-no {
  background: rgba(255,90,90,0.08);
  border: 1px solid rgba(255,90,90,0.4);
  color: #ff7a7a;
}
.cbgp-bio-no svg { stroke: #ff7a7a; }
.cbgp-bio-no:hover {
  background: rgba(255,90,90,0.18);
  animation: cbgp-bio-shake 0.4s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes cbgp-bio-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.cbgp-bio-yes {
  background: linear-gradient(135deg, #00ffa8, #00b8e0);
  border: 1px solid transparent;
  color: #001f1c;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.cbgp-bio-yes svg { stroke: #001f1c; }
.cbgp-bio-yes:hover { box-shadow: 0 0 24px rgba(0,255,168,0.5); }
.cbgp-bio-yes::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0,255,168,0.6) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.cbgp-bio-yes:active::before { animation: cbgp-bio-burst 0.6s ease-out; }
@keyframes cbgp-bio-burst {
  0%   { transform: scale(0.6); opacity: 0.85; }
  100% { transform: scale(1.6); opacity: 0; }
}
.cbgp-bio button:focus-visible { outline: 2px solid #00ffa8; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cbgp-bio-no:hover { animation: none; }
}