Liquid Mercury
Three options on a viscous mercury rail. The thumb morphs its border-radius asymmetrically as it slides — the kind of animation curve a human would never hand-author.
Liquid Mercury the 1st 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-mercury" role="group" aria-label="Billing period"> <legend class="cbgp-sr">Billing period</legend> <input type="radio" name="cbgp-mercury" id="cbgp-mercury-1" checked /> <label for="cbgp-mercury-1">Monthly</label> <input type="radio" name="cbgp-mercury" id="cbgp-mercury-2" /> <label for="cbgp-mercury-2">Yearly</label> <input type="radio" name="cbgp-mercury" id="cbgp-mercury-3" /> <label for="cbgp-mercury-3">Forever</label> <span class="cbgp-mercury-thumb" aria-hidden="true"></span> </fieldset>
.cbgp-sr {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cbgp-mercury {
display: inline-flex; position: relative; padding: 4px;
background: radial-gradient(ellipse at 30% 30%, #1a1a2a 0%, #0a0a14 100%);
border: 1px solid rgba(220,225,230,0.08);
border-radius: 999px;
box-shadow:
inset 0 2px 6px rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.04);
}
.cbgp-mercury input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-mercury label {
flex: 1 1 0; min-width: 88px;
position: relative; z-index: 1;
padding: 9px 18px; text-align: center;
font: 700 11px/1 ui-monospace, monospace;
letter-spacing: 0.18em;
color: rgba(220,225,230,0.5);
cursor: pointer; transition: color 0.4s;
border-radius: 999px;
}
.cbgp-mercury input:checked + label { color: #0a0a14; }
.cbgp-mercury-thumb {
position: absolute; top: 4px; bottom: 4px; left: 4px;
width: calc(33.333% - 2.667px);
background:
radial-gradient(ellipse at 30% 30%, #f5f5fa 0%, #cad3da 50%, #6a7480 100%);
border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
z-index: 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
inset 0 -2px 4px rgba(0,0,0,0.25),
0 2px 8px rgba(220,225,230,0.18);
transition:
transform 0.55s cubic-bezier(.68,-0.4,.32,1.4),
border-radius 0.6s cubic-bezier(.65,0,.35,1);
}
#cbgp-mercury-2:checked ~ .cbgp-mercury-thumb {
transform: translateX(100%);
border-radius: 50% 60% 50% 50% / 60% 40% 60% 40%;
}
#cbgp-mercury-3:checked ~ .cbgp-mercury-thumb {
transform: translateX(200%);
border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%;
}