CodePenネタです。
SVGでチェックボックスを作る方法です。
HTMLにPug、CSSにSCSSを使っています。

サンプル

See the Pen Cool Checkbox with SVG! by Luis Adame (@lewis_adame) on CodePen.

HTML(Pug)

- var d = 200;
.form
  input(type="checkbox", id="check")
  label(for="check", style='--d: '+d+'px')
    svg(viewBox=[0, 0, 50, 50].join( ))
       path(d="M5 30 L 20 45 L 45 5")

CSS(SCSS)

*, *:after, *:before {box-sizing: border-box;}

body {
  background: whitesmoke;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

input#check {
  position: absolute;
  opacity: 0;
  &:checked + label svg path {
    stroke-dashoffset: 0;
  }
}

#check + label {
  display: block;
  border: 13px solid #333;
  width: var(--d); height: var(--d);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .2s ease;
  &:active {
    transform: scale(1.05);
  }

  svg {
    pointer-events: none;
    path {          
      fill: none;
      stroke: #333;
      stroke-width: 4px;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      transition: all 350ms cubic-bezier(1,0,.37,.91);
    }
  }
}

一言

いつか使えそう。


コメントを投稿する

* が付いている項目は必須です。