Cellular Toggle
Format toggles where checking a cell fills it with a swirling conic gradient anchored to its center. Hover prefills the conic with a faint preview.
Cellular Toggle the 5th 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
<fieldset class="cbgp-cell" role="group" aria-label="Text formatting">
<legend class="cbgp-sr">Text formatting</legend>
<label
><input type="checkbox" /><span aria-label="Bold"><strong>B</strong></span></label
>
<label
><input type="checkbox" checked /><span aria-label="Italic"><em>I</em></span></label
>
<label
><input type="checkbox" /><span aria-label="Underline"><u>U</u></span></label
>
<label
><input type="checkbox" /><span aria-label="Strikethrough"><s>S</s></span></label
>
</fieldset> @property --cbgp-cell-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-cell {
display: inline-flex; gap: 4px;
border: 0; padding: 6px;
background: rgba(8,10,18,0.85);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.05);
}
.cbgp-cell input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-cell label { display: block; cursor: pointer; }
.cbgp-cell span {
--cbgp-cell-a: 0deg;
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
background:
conic-gradient(from var(--cbgp-cell-a),
transparent 0deg, transparent 200deg,
rgba(255,90,241,0.28) 260deg,
rgba(0,255,224,0.32) 320deg,
transparent 360deg),
rgba(20,22,30,0.85);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
font: 700 14px/1 'Times New Roman', serif;
color: rgba(220,225,230,0.6);
transition: --cbgp-cell-a 0.55s cubic-bezier(.65,0,.35,1), color 0.25s, border-color 0.25s;
}
.cbgp-cell label:hover span { color: rgba(220,225,230,0.9); --cbgp-cell-a: 180deg; }
.cbgp-cell input:checked + span {
--cbgp-cell-a: 360deg;
color: #fff;
border-color: rgba(0,255,224,0.5);
box-shadow: 0 0 16px rgba(0,255,224,0.2);
}
.cbgp-cell input:focus-visible + span { outline: 2px solid #00ffe0; outline-offset: -2px; }