Bio-Decision
A two-button row where each button has a different "voice": reject shakes when hovered (negative pull), approve emits a particle burst on click via a single mask-image pseudo-element.
Bio-Decision the 15th 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-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> .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; }
}