22 CSS Button Group Designs 05 / 22
Cellular Toggle
Format toggles where checking a cell fills it with a swirling conic gradient anchored to its center.
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> <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; } @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; }