Draw-Tick Checkbox

Tick draws itself with a box bounce.

Akkoord met de voorwaarden

How to use it

Paste the HTML where the forms & inputs should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
No JavaScript needed.

<!-- Draw-Tick Checkbox · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<label class="cbk"><input type="checkbox" class="cbk__in" checked /><span class="cbk__box"><svg class="cbk__svg" viewBox="0 0 24 24"><path class="cbk__path" d="M5 13l4 4L19 7"/></svg></span><span class="cbk__label">Akkoord met de voorwaarden</span></label>
</div>

/* Draw-Tick Checkbox · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.cbk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;font:600 17px/1.2 'Switzer',sans-serif;color:#0a0a0a}
.cbk__in{position:absolute;opacity:0;pointer-events:none}
.cbk__box{width:34px;height:34px;border-radius:9px;border:2.5px solid #0a0a0a;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.cbk__svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cbk__path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s ease .05s}
.cbk__in:checked+.cbk__box{background:#F5480F;border-color:#F5480F;animation:cbkPop .4s}
.cbk__in:checked+.cbk__box .cbk__path{stroke-dashoffset:0}
@keyframes cbkPop{0%{transform:scale(1)}40%{transform:scale(.86)}100%{transform:scale(1)}}

More forms & inputs

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →