Draw-Tick Checkbox

Vinkje wordt getekend met bounce van de box.

Akkoord met de voorwaarden

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- 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)}}

Meer uit formulieren & invoer

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →