チェックマーク・ドローインボタン

<div class="d08-09-06-row">
          <button class="d08-09-06-box" type="button" role="checkbox" aria-checked="false" aria-label="タスクを完了にする">
            <svg viewBox="0 0 28 28" width="28" height="28" aria-hidden="true">
              <rect class="d08-09-06-rect" x="2" y="2" width="24" height="24" rx="7" fill="none"/>
              <path class="d08-09-06-check" d="M7 14.5l4.2 4.2L21 9" fill="none"/>
            </svg>
          </button>
          <span class="d08-09-06-label">資料を提出する</span>
        </div>

.d08-09-06-row{display:flex;align-items:center;gap:12px}
        .d08-09-06-box{background:none;border:none;padding:0;cursor:pointer;line-height:0}
        .d08-09-06-rect{stroke:#c4c8d4;stroke-width:2;transition:stroke .25s,fill .25s}
        .d08-09-06-check{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .3s ease}
        .d08-09-06-box.is-done .d08-09-06-rect{stroke:#22c55e;fill:#22c55e}
        .d08-09-06-box.is-done .d08-09-06-check{stroke-dashoffset:0}
        .d08-09-06-label{font-size:14px;font-weight:600;color:#2a2d3a;transition:color .25s}
        .d08-09-06-box.is-done ~ .d08-09-06-label{color:#9aa0ad;text-decoration:line-through}

(function(){
        var box=document.querySelector('#item-08-09-06 .d08-09-06-box');if(!box)return;
        box.addEventListener('click',function(){
          var done=box.classList.toggle('is-done');
          box.setAttribute('aria-checked',done?'true':'false');
        });
      })();