Terms and Conditions Checkbox
An I agree checkbox that unlocks the button under it: the lock icon turns into an arrow and the button fills with the accent. Pure CSS with :has(); also set disabled on the button from your form code.
Also known as: i agree checkbox css, accept terms checkbox, enable button when checkbox checked css.
HTML
<div class="chk-terms-agree-button">
<label class="chk-terms-agree-button-label">
<input type="checkbox">
<span class="chk-terms-agree-button-box"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
<span>I agree to the <u class="chk-terms-agree-button-link">Terms of Service</u></span>
</label>
<button type="submit" class="chk-terms-agree-button-btn">
Continue
<span class="chk-terms-agree-button-icons" aria-hidden="true">
<svg class="chk-terms-agree-button-lock" viewBox="0 0 24 24"><rect x="5.5" y="10.5" width="13" height="9.5" rx="2"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"/></svg>
<svg class="chk-terms-agree-button-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></svg>
</span>
</button>
</div>CSS
.chk-terms-agree-button {
--c: var(--chk-color, #3b82f6);
font-size: var(--chk-size, 24px);
display: grid;
gap: 0.9em;
line-height: 1.3;}
.chk-terms-agree-button-label {
position: relative;
display: flex;
align-items: center;
gap: 0.6em;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.chk-terms-agree-button-label input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.chk-terms-agree-button-box {
display: grid;
place-items: center;
flex: none;
width: 1.15em;
height: 1.15em;
border: 0.12em solid color-mix(in srgb, currentColor 38%, transparent);
border-radius: 0.3em;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-terms-agree-button-box svg {
width: 0.82em;
height: 0.82em;
fill: none;
stroke: #fff;
stroke-width: 3.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.2s ease-in;
}
.chk-terms-agree-button-link {
text-decoration-color: color-mix(in srgb, var(--c) 60%, transparent);
text-underline-offset: 0.18em;
}
.chk-terms-agree-button-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.6em 1.2em;
border: 0;
border-radius: 0.6em;
background: color-mix(in srgb, currentColor 10%, transparent);
color: inherit;
font: inherit;
font-weight: 600;
opacity: 0.5;
pointer-events: none;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}
.chk-terms-agree-button-icons {
display: grid;
width: 1em;
height: 1em;
}
.chk-terms-agree-button-icons svg {
grid-area: 1 / 1;
width: 1em;
height: 1em;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-terms-agree-button-arrow {
opacity: 0;
transform: translateX(-0.6em);
}
.chk-terms-agree-button-label input:checked + .chk-terms-agree-button-box {
background: var(--c);
border-color: var(--c);
}
.chk-terms-agree-button-label input:checked + .chk-terms-agree-button-box svg {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.3s ease-out 0.05s;
}
.chk-terms-agree-button-label input:focus-visible + .chk-terms-agree-button-box {
outline: 0.12em solid var(--c);
outline-offset: 0.18em;
}
.chk-terms-agree-button:has(input:checked) .chk-terms-agree-button-btn {
background: var(--c);
color: #fff;
opacity: 1;
pointer-events: auto;
}
.chk-terms-agree-button:has(input:checked) .chk-terms-agree-button-lock {
opacity: 0;
transform: scale(0.4) rotate(-30deg);
}
.chk-terms-agree-button:has(input:checked) .chk-terms-agree-button-arrow {
opacity: 1;
transform: none;
transition-delay: 0.1s;
}
.chk-terms-agree-button-btn:active {
transform: scale(0.97);
}
.chk-terms-agree-button-btn:focus-visible {
outline: 0.12em solid var(--c);
outline-offset: 0.18em;
}
@media (prefers-reduced-motion: reduce) {
.chk-terms-agree-button, .chk-terms-agree-button *, .chk-terms-agree-button::before, .chk-terms-agree-button::after, .chk-terms-agree-button *::before, .chk-terms-agree-button *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<div class="group grid gap-3">
<label class="relative flex cursor-pointer select-none items-center gap-2.5">
<input type="checkbox" class="peer sr-only">
<span class="grid h-5 w-5 shrink-0 place-items-center rounded-md border-2 border-gray-400 transition-colors peer-checked:border-blue-500 peer-checked:bg-blue-500 peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2 peer-checked:[&>svg]:[stroke-dashoffset:0]">
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-none stroke-white stroke-[3.4] transition-[stroke-dashoffset] duration-300 [stroke-dasharray:20] [stroke-dashoffset:20] [stroke-linecap:round] [stroke-linejoin:round]" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>
</span>
<span>I agree to the <u>Terms of Service</u></span>
</label>
<button type="submit" class="pointer-events-none rounded-lg bg-gray-200 px-5 py-2.5 font-semibold text-gray-500 opacity-60 transition duration-300 active:scale-95 group-has-[:checked]:pointer-events-auto group-has-[:checked]:bg-blue-500 group-has-[:checked]:text-white group-has-[:checked]:opacity-100">Continue</button>
</div>Customizing this snippet
- Color: set
--chk-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--chk-size. Every other dimension is inem, so the whole thing scales together. Currently previewing24px. - 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.