Magnetic Orb
A single violet orb slides between options as if magnetically pulled — uses sibling-position state to drive the orb position with zero JS.
Magnetic Orb the 3rd of 18 designs in the 18 CSS Radio Button 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="crb-orb"> <legend class="crb-sr">Speed</legend> <input type="radio" name="crb-orb" id="crb-orb-1" checked /> <label for="crb-orb-1"><span class="crb-orb-dot"></span>Slow</label> <input type="radio" name="crb-orb" id="crb-orb-2" /> <label for="crb-orb-2"><span class="crb-orb-dot"></span>Fast</label> <input type="radio" name="crb-orb" id="crb-orb-3" /> <label for="crb-orb-3"><span class="crb-orb-dot"></span>Turbo</label> </fieldset>
.crb-orb { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; }
.crb-orb input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-orb label {
display: flex; align-items: center; gap: 12px;
padding: 8px 14px; border-radius: 8px;
font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
transition: background 0.25s, color 0.25s;
}
.crb-orb-dot {
width: 14px; height: 14px; border-radius: 50%;
background: #2a2a3e; box-shadow: inset 0 0 0 2px #444461;
transition: background 0.35s cubic-bezier(0.65,0,0.35,1), box-shadow 0.35s, transform 0.35s;
}
.crb-orb input:checked + label { background: rgba(124,108,255,0.08); color: #fff; }
.crb-orb input:checked + label .crb-orb-dot {
background: #7c6cff; box-shadow: inset 0 0 0 2px #7c6cff, 0 0 12px rgba(124,108,255,0.7);
transform: scale(1.15);
}
.crb-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;
}