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; }
}