Handgetekende pijl naar de knop New

A hand drawn arrow draws itself from a short note to the main button, in three shapes: curl, loop or zigzag. Hovering the button nudges the arrow towards it. For the free trial call of a dance school, a sports club sign up or the single action on a landing page.

Nog nooit gedanst? Je eerste les bij Dansschool Pas in Zwolle is gratis.

kost je twee minuten

Plan je proefles

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Handgetekende pijl naar de knop · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7pk">
<div class="r7pk__in">
<p class="r7pk__h">Nog nooit gedanst? Je eerste les bij Dansschool Pas in Zwolle is gratis.</p>
<div class="r7pk__row">
<div class="r7pk__wijs">
<span class="r7pk__note">kost je twee minuten</span>
<svg class="r7pk__svg" viewBox="0 0 130 80" aria-hidden="true" focusable="false">
<g class="r7pk__v is-on" data-v="krul"><path class="r7pk__l" d="M6 8C28 2 50 8 50 26C50 42 32 44 32 33C32 20 68 22 88 40C98 49 108 56 121 58"/><path class="r7pk__p" d="M109 49L121 58L108 65"/></g>
<g class="r7pk__v" data-v="lus"><path class="r7pk__l" d="M6 14C34 6 62 62 46 62C28 62 46 20 70 36C88 48 102 58 121 58"/><path class="r7pk__p" d="M109 49L121 58L108 65"/></g>
<g class="r7pk__v" data-v="zigzag"><path class="r7pk__l" d="M6 10L26 30L38 16L56 40L70 26L88 50L101 40L121 58"/><path class="r7pk__p" d="M107 52L121 58L110 67"/></g>
</svg>
</div>
<a class="r7pk__btn" href="#r7s-pijlen-knop">Plan je proefles</a>
</div>
<div class="r7pk__keuze" role="group" aria-label="Vorm van de pijl">
<button class="r7pk__k" type="button" data-v="krul" aria-pressed="true">Krul</button>
<button class="r7pk__k" type="button" data-v="lus" aria-pressed="false">Lus</button>
<button class="r7pk__k" type="button" data-v="zigzag" aria-pressed="false">Zigzag</button>
</div>
</div>
</div>
</div>

/* Handgetekende pijl naar de knop · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7pk{position:absolute;inset:0;display:grid;place-items:center;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;padding:14px 18px;text-align:left}
.r7pk *,.r7pk *::before,.r7pk *::after{box-sizing:border-box}
.r7pk__in{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px}
.r7pk__h{margin:0;font:600 clamp(15px,5cqi,21px)/1.2 'Switzer',sans-serif;letter-spacing:-.015em;text-wrap:balance}
.r7pk__row{display:grid;grid-template-columns:minmax(0,150px) auto;justify-content:start;align-items:end;gap:4px}
.r7pk__wijs{position:relative;min-width:0}
.r7pk__note{display:block;font:400 13px/1.2 'Switzer',sans-serif;color:#4a4845;margin:0 0 2px 2px}
.r7pk__svg{display:block;width:100%;max-width:150px;height:auto;overflow:visible;transition:transform .2s ease}
.r7pk__v{display:none}
.r7pk__v.is-on{display:inline}
.r7pk__l,.r7pk__p{fill:none;stroke:#F5480F;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.r7pk__btn{display:inline-block;margin-bottom:34px;padding:12px 16px;background:#0a0a0a;color:#fff;border-radius:4px;font:600 15px/1 'Switzer',sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .16s}
.r7pk__btn:hover{background:#2a2826}
.r7pk__btn:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.r7pk__row:has(.r7pk__btn:hover) .r7pk__svg,.r7pk__row:has(.r7pk__btn:focus-visible) .r7pk__svg{transform:translateX(5px)}
.r7pk__keuze{display:flex;gap:6px;flex-wrap:wrap}
.r7pk__k{min-height:28px;padding:4px 10px;border:1px solid rgba(10,10,10,.25);border-radius:4px;background:#fff;color:#0a0a0a;font:500 13px/1 'Switzer',sans-serif;cursor:pointer;transition:border-color .16s,background-color .16s}
.r7pk__k:hover{border-color:#0a0a0a}
.r7pk__k[aria-pressed="true"]{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.r7pk__k:focus-visible{outline:2px solid #F5480F;outline-offset:2px}

// Handgetekende pijl naar de knop · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.r7pk');if(!w)return;
var rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var groups=[].slice.call(w.querySelectorAll('.r7pk__v')),knoppen=[].slice.call(w.querySelectorAll('.r7pk__k'));
function teken(g){
  var l=g.querySelector('.r7pk__l'),p=g.querySelector('.r7pk__p');
  [l,p].forEach(function(el){var n=el.getTotalLength();el.style.transition='none';el.style.strokeDasharray=n;el.style.strokeDashoffset=rm?0:n;});
  if(rm)return;
  l.getBoundingClientRect();
  l.style.transition='stroke-dashoffset .9s cubic-bezier(.45,.05,.3,1)';l.style.strokeDashoffset=0;
  p.style.transition='stroke-dashoffset .22s ease-out .88s';p.style.strokeDashoffset=0;
}
function kies(v){
  groups.forEach(function(g){g.classList.toggle('is-on',g.getAttribute('data-v')===v);});
  knoppen.forEach(function(b){b.setAttribute('aria-pressed',b.getAttribute('data-v')===v?'true':'false');});
  teken(w.querySelector('.r7pk__v.is-on'));
}
knoppen.forEach(function(b){b.addEventListener('click',function(){kies(b.getAttribute('data-v'));});});
var gezien=false;
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(e){if(e[0].isIntersecting&&!gezien){gezien=true;kies('krul');io.disconnect();}},{threshold:.4});io.observe(w);}else kies('krul');
}
init(document.querySelector('.jouw-container'));

More components

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 →