پیشنمایش زنده
کد HTML
<div class="liquid-group">
<input
type="radio"
id="value-1"
name="value-radio"
value="value-1"
checked=""
/>
<label for="value-1">Static</label>
<input type="radio" id="value-2" name="value-radio" value="value-2" />
<label for="value-2">Liquid</label>
<input type="radio" id="value-3" name="value-radio" value="value-3" />
<label for="value-3">Fluid</label>
<div class="liquid-slider"></div>
</div>
کد CSS
/* ===============================
CONTAINER
================================= */
.liquid-group {
--gap: 6px;
--radius: 16px;
--speed: 0.55s;
--ease: cubic-bezier(0.22, 0.9, 0.25, 1);
position: relative;
display: inline-grid;
grid-auto-flow: column;
background: #000;
padding: var(--gap);
border-radius: var(--radius);
border: 1px solid #1a1a1a;
margin: 30px auto;
overflow: hidden;
}
/* ===============================
INPUT (hidden acessível)
================================= */
.liquid-group input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* ===============================
LABELS
================================= */
.liquid-group label {
position: relative;
z-index: 2;
padding: 12px 28px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.5px;
color: #555;
cursor: pointer;
white-space: nowrap;
transition:
color 0.35s ease,
transform 0.2s ease;
}
/* micro feedback */
.liquid-group label:active {
transform: scale(0.97);
}
/* texto ativo */
.liquid-group input:checked + label {
color: #fff;
}
/* ===============================
SLIDER (LIQUID)
================================= */
.liquid-slider {
position: absolute;
inset: var(--gap);
width: calc(100% / 3 - var(--gap));
border-radius: calc(var(--radius) - 4px);
background: #222;
z-index: 1;
transition:
transform var(--speed) var(--ease),
background 0.3s ease;
}
/* brilho interno */
.liquid-slider::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.06),
inset 0 -1px 2px rgba(0, 0, 0, 0.6);
}
/* ===============================
MOVIMENTO AUTOMÁTICO
================================= */
#value-1:checked ~ .liquid-slider {
transform: translateX(0%);
}
#value-2:checked ~ .liquid-slider {
transform: translateX(100%);
}
#value-3:checked ~ .liquid-slider {
transform: translateX(200%);
}