パーツ番号 02-15-10 ・ CSSのみ

手描き風誘導矢印

手描き風の曲線矢印がボタンに向かってすっと伸びていきます。WordPressのCTAボタン周りに添えると視線誘導とクリック率アップに役立ちます。

clickcss

プレビュー

ソースコード

HTML

<div class="d02-15-10-wrap">
          <span class="d02-15-10-label">こちら</span>
          <svg class="d02-15-10-arrow" viewBox="0 0 140 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path class="d02-15-10-path" d="M6,10 C40,8 70,30 96,46 C108,53 116,55 124,54" fill="none"/>
            <path class="d02-15-10-head" d="M108,44 L124,54 L112,60" fill="none"/>
          </svg>
          <span class="d02-15-10-target">ボタン</span>
        </div>

CSS

.d02-15-10{background:#fff}
        .d02-15-10-wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
        .d02-15-10-label{font-size:14px;color:#6b7280;font-weight:700;margin-left:4px}
        .d02-15-10-arrow{width:140px;height:70px;overflow:visible}
        .d02-15-10-path{stroke:#7c3aed;stroke-width:3;stroke-linecap:round;fill:none;stroke-dasharray:160;stroke-dashoffset:160}
        .d02-15-10-head{stroke:#7c3aed;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:40;stroke-dashoffset:40}
        .d02-15-10.is-in .d02-15-10-path{animation:d1810line 1s ease-out forwards}
        .d02-15-10.is-in .d02-15-10-head{animation:d1810head .3s ease-out .9s forwards}
        .d02-15-10-target{align-self:flex-end;margin-right:10px;padding:6px 16px;background:#7c3aed;color:#fff;font-size:13px;font-weight:700;border-radius:99px}
        @keyframes d1810line{to{stroke-dashoffset:0}}
        @keyframes d1810head{to{stroke-dashoffset:0}}
        @media (prefers-reduced-motion: reduce){.d02-15-10-path,.d02-15-10-head{animation:none!important;stroke-dashoffset:0}}

クラス名 .d02-15-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。