Quantum Split
Primary action with a sibling menu that opens via native details/summary. The split chevron rotates 180° and the menu materialises with a clip-path reveal — no JS.
Quantum Split the 4th 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-quantum" role="group" aria-label="Save options">
<button type="button" class="cbgp-quantum-main">Deploy</button>
<details class="cbgp-quantum-menu">
<summary aria-label="More deploy options">
<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" /></svg>
</summary>
<div class="cbgp-quantum-list">
<button type="button">Deploy preview</button>
<button type="button">Deploy and tag</button>
<button type="button">Deploy and notify</button>
</div>
</details>
</div> .cbgp-quantum {
display: inline-flex; position: relative;
background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
overflow: visible;
box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.cbgp-quantum-main {
padding: 11px 22px;
border: 0; cursor: pointer;
background: linear-gradient(135deg, rgba(0,255,224,0.18) 0%, rgba(255,90,241,0.18) 100%);
color: #fff;
font: 700 12px/1 ui-monospace, monospace;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 10px 0 0 10px;
border-right: 1px solid rgba(255,255,255,0.1);
text-shadow: 0 0 8px rgba(0,255,224,0.3);
transition: filter 0.2s;
}
.cbgp-quantum-main:hover { filter: brightness(1.18); }
.cbgp-quantum-menu summary {
list-style: none; cursor: pointer;
padding: 11px 14px;
display: flex; align-items: center;
border-radius: 0 10px 10px 0;
transition: background 0.18s;
}
.cbgp-quantum-menu summary::-webkit-details-marker { display: none; }
.cbgp-quantum-menu summary svg { width: 12px; height: 12px; fill: none; stroke: #00ffe0; stroke-width: 2; transition: transform 0.3s cubic-bezier(.65,0,.35,1); }
.cbgp-quantum-menu summary:hover { background: rgba(0,255,224,0.06); }
.cbgp-quantum-menu[open] summary { background: rgba(0,255,224,0.1); }
.cbgp-quantum-menu[open] summary svg { transform: rotate(180deg); }
.cbgp-quantum-list {
position: absolute; right: 0; top: calc(100% + 6px);
min-width: 200px;
background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
border: 1px solid rgba(0,255,224,0.25);
border-radius: 8px;
padding: 4px;
z-index: 10;
box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 24px rgba(0,255,224,0.08);
clip-path: inset(0 0 0 0 round 8px);
animation: cbgp-quantum-in 0.25s cubic-bezier(.65,0,.35,1);
}
@keyframes cbgp-quantum-in {
from { clip-path: inset(0 0 100% 0 round 8px); opacity: 0; }
to { clip-path: inset(0 0 0 0 round 8px); opacity: 1; }
}
.cbgp-quantum-list button {
display: block; width: 100%;
padding: 9px 14px;
border: 0; cursor: pointer;
background: transparent;
color: rgba(220,225,230,0.85);
font: 500 12px/1 ui-sans-serif, system-ui;
text-align: left;
border-radius: 5px;
transition: background 0.15s, color 0.15s;
}
.cbgp-quantum-list button:hover { background: rgba(0,255,224,0.08); color: #fff; }