Sliding Knob Button
A pill track with a round knob that rolls to the far end on hover while the label slides the other way and the track fills in. The arrow turns one full circle, so the knob reads as rolling.
Also known as: swipe button, toggle style button, slide to confirm button.
HTML
<button class="btn-sliding-knob">
<span class="btn-sliding-knob-knob" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</span>
<span class="btn-sliding-knob-label">Get started</span>
</button>CSS
.btn-sliding-knob {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
cursor: pointer;
position: relative;
justify-content: flex-start;
width: 11em;
height: 3em;
padding: 0 0.3em;
border: 0;
border-radius: 1.5em;
background-color: color-mix(in srgb, var(--c) 14%, transparent);
color: var(--c);
transition: background-color 0.5s cubic-bezier(0.65, 0, 0.35, 1);}
.btn-sliding-knob-knob {
position: absolute;
top: 0.3em;
left: 0.3em;
display: grid;
place-items: center;
width: 2.4em;
height: 2.4em;
border-radius: 50%;
background: var(--c);
color: #fff;
box-shadow: 0 0.15em 0.4em color-mix(in srgb, var(--c) 45%, transparent);
transition:
transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
background-color 0.5s ease,
color 0.5s ease;
}
.btn-sliding-knob-knob svg {
width: 1.2em;
height: 1.2em;
transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-sliding-knob-label {
flex: 1;
padding-left: 2.6em;
text-align: center;
transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), color 0.5s ease;
}
.btn-sliding-knob:is(:hover, :focus-visible) { background-color: var(--c); }
.btn-sliding-knob:is(:hover, :focus-visible) .btn-sliding-knob-knob {
transform: translateX(8em);
background-color: #fff;
color: var(--c);
}
.btn-sliding-knob:is(:hover, :focus-visible) .btn-sliding-knob-knob svg { transform: rotate(360deg); }
.btn-sliding-knob:is(:hover, :focus-visible) .btn-sliding-knob-label {
transform: translateX(-2.6em);
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
.btn-sliding-knob, .btn-sliding-knob *, .btn-sliding-knob::before, .btn-sliding-knob::after, .btn-sliding-knob *::before, .btn-sliding-knob *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.