Animated CSS Checkboxes with SVG & JavaScript

1,428 zegarkidawida

<div class="grid">
    
    <div class="card">
      <div class="label">
        <label class="chk-svg">
          <input id="svg1" type="checkbox" />
          <span class="svg-box" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
              <rect x="2.5" y="2.5" width="19" height="19" rx="4" class="box-stroke"></rect>
              <path class="check" d="M6.5 12.3 L10.2 15.8 L17.5 8.5" />
            </svg>
          </span>
        </label>
        <div>
          <strong>Stroke draw</strong>
          <small class="hint">Checkmark drawn with SVG stroke.</small>
        </div>
      </div>
    </div>

<div class="card">
      <div class="label" style="gap:18px">
        <label class="toggle">
          <input id="toggle1" type="checkbox" />
          <span class="knob"></span>
          <span class="bg"></span>
        </label>
        <div>
          <strong>Toggle pill</strong>
          <small class="hint">Mobile-style on/off switch.</small>
        </div>
      </div>
    </div>

<div class="card">
      <div class="label">
        <label class="morph">
          <input id="morph1" type="checkbox" />
          <span class="tile">
            <svg class="tick" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 12.5 L10 17.5 L19 7.5"></path>
            </svg>
          </span>
        </label>
        <div>
          <strong>Morph pop</strong>
          <small class="hint">Full checkmark with pop effect.</small>
        </div>
      </div>
    </div>

<div class="card">
      <div class="label">
        <label style="display:inline-flex;align-items:center;gap:12px;cursor:pointer;position:relative;overflow:hidden">
          <input id="jsCheck" type="checkbox" />
          <svg id="burst" width="26" height="26" viewBox="0 0 24 24" style="overflow:visible">
            <rect id="jsRect" x="2.5" y="2.5" width="19" height="19" rx="5" fill="transparent" stroke="rgba(255,255,255,0.08)" stroke-width="2"></rect>
            <path id="jsPath" d="M6.5 12.3 L10.2 15.8 L17.5 8.5" fill="none" stroke="transparent" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
          </svg>
          <div>
            <strong>JS burst</strong>
            <small class="hint">Uses anime.js for extra pop.</small>
          </div>
        </label>
      </div>
    </div>
  </div>

<footer>Responsive, mobile-friendly.</footer>
</div>

CSS

:root {
  --bg: #0f1724;
  --muted: #9aa4b2;
  --accent: #38bdf8; /* cyan */
  --success: #34d399; /* green */
  --size: 22px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: linear-gradient(180deg, #071026 0%, #0b1220 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e6eef6;
  padding: 32px;
  box-sizing: border-box;
}

.wrap {
  width: min(980px, 96%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
}
h1 {
  margin: 0 0 18px;
  font-size: 20px;
}
p {
  margin: 0 0 18px;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  align-items: start;
}

.card {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 16px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.label {
  display: flex;
  gap: 12px;
  align-items: center;

user-select: none;
  position: relative;
  overflow: hidden;
}
.label small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

/* Ripple effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 600ms linear;
  pointer-events: none;
  z-index: 0;
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.svg-box {
  cursor: pointer;
}

/* --------------------------
       STYLE 1 - SVG stroke draw
       -------------------------- */
.chk-svg {
  --s: var(--size);
  width: calc(var(--s) * 1.4);
  height: calc(var(--s) * 1.4);
  display: inline-grid;
  place-items: center;
  position: relative;
}
.chk-svg input {
  display: none;
}
.svg-box {
  width: calc(var(--s) * 1.1);
  height: calc(var(--s) * 1.1);
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  transition: all 0.22s ease;
}
.svg-box svg {
  width: calc(var(--s) * 0.7);
  height: calc(var(--s) * 0.7);
}
.svg-box .check {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
    transform 0.28s;
  transform-origin: center;
}
.svg-box .box-stroke {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2;
  fill: none;
}
.chk-svg input:checked + .svg-box {
  border-color: rgba(56, 189, 248, 0.6);
  background: linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.06),
    rgba(56, 189, 248, 0.03)
  );
  transform: translateY(-1px);
}
.chk-svg input:checked + .svg-box .check {
  stroke-dashoffset: 0;
  transform: scale(1.02);
}

/* --------------------------
       STYLE 2 - Toggle pill
       -------------------------- */
.toggle {
  --w: 56px;
  --h: 30px;
  width: var(--w);
  height: var(--h);
  position: relative;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  display: inline-block;
  transition: background 0.25s;
}
.toggle input {
  display: none;
}
.toggle .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--h) - 6px);
  height: calc(var(--h) - 6px);
  border-radius: 50%;
  background: #fff;
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.toggle input:checked + .knob {
  transform: translateX(calc(var(--w) - var(--h)));
}
.toggle input:checked ~ .bg {
  background: linear-gradient(
    90deg,
    rgba(52, 211, 153, 0.18),
    rgba(56, 189, 248, 0.12)
  );
}
.toggle .bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  transition: background 0.25s;
}

/* --------------------------
       STYLE 3 - Morphing full checkmark
       -------------------------- */
.morph {
  --s: var(--size);
  width: calc(var(--s) * 1.4);
  height: calc(var(--s) * 1.4);
  display: inline-grid;
  place-items: center;
}
.morph input {
  display: none;
}
.morph .tile {
  width: calc(var(--s) * 1);
  height: calc(var(--s) * 1);
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  transition: all 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.morph .tick {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.28s, opacity 0.2s;
}
.morph input:checked + .tile {
  border-color: rgba(52, 211, 153, 0.95);
  background: linear-gradient(
    180deg,
    rgba(52, 211, 153, 0.12),
    rgba(52, 211, 153, 0.06)
  );
  transform: scale(1.04);
}
.morph input:checked + .tile .tick {
  opacity: 1;
  transform: scale(1);
}

.hint {
  font-size: 13px;
  color: var(--muted);
}
footer {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}

/* --------------------------
       MOBILE STYLES
       -------------------------- */
@media (max-width: 600px) {
  :root {
    --size: 28px;
  }
  body {
    padding: 16px;
  }
  .wrap {
    padding: 20px;
  }
  h1 {
    font-size: 22px;
  }
  p {
    font-size: 15px;
  }
  .grid {
    gap: 22px;
  }
  .card {
    padding: 20px;
  }
  .label {
    gap: 16px;
  }
  .label small {
    font-size: 14px;
  }
}

document.querySelectorAll(".label, label").forEach((el) => {
  el.addEventListener("click", function (e) {
    const input = el.querySelector('input[type="checkbox"]');
    if (!input) return;

const rect = el.getBoundingClientRect();
    const ripple = document.createElement("span");
    ripple.className = "ripple";

// Detect style type by class
    let accent = "rgba(56,189,248,0.4)"; // default cyan
    if (el.closest(".morph")) accent = "rgba(52,211,153,0.4)"; // green
    if (el.closest(".toggle")) accent = "rgba(56,189,248,0.35)"; // teal/cyan
    if (el.closest(".chk-svg")) accent = "rgba(56,189,248,0.4)"; // blue
    // JS burst falls back to default cyan

// Color depending on current state
    ripple.style.background = input.checked
      ? "rgba(255,255,255,0.3)" // turning OFF
      : accent; // turning ON

ripple.style.left = e.clientX - rect.left + "px";
    ripple.style.top = e.clientY - rect.top + "px";

el.appendChild(ripple);
    setTimeout(() => ripple.remove(), 600);
  });
});

// JS burst animation
(function () {
  const cb = document.getElementById("jsCheck");
  const rect = document.getElementById("jsRect");
  const path = document.getElementById("jsPath");
  const len = path.getTotalLength ? path.getTotalLength() : 20;
  path.style.strokeDasharray = len;
  path.style.strokeDashoffset = len;
  path.style.stroke = "var(--accent)";
  cb.addEventListener("change", () => {
    if (cb.checked) {
      anime
        .timeline({ easing: "easeOutQuad" })
        .add({
          targets: rect,
          stroke: ["rgba(255,255,255,0.08)", "rgba(56,189,248,0.9)"],
          duration: 220
        })
        .add({
          targets: rect,
          scale: [1, 1.06, 1],
          duration: 300,
          offset: "-=180"
        })
        .add({
          targets: path,
          strokeDashoffset: [len, 0],
          duration: 260,
          offset: "-=220"
        });
    } else {
      anime({
        targets: path,
        strokeDashoffset: [0, len],
        duration: 180,
        easing: "easeInQuad"
      });
      anime({
        targets: rect,
        stroke: ["rgba(56,189,248,0.9)", "rgba(255,255,255,0.08)"],
        duration: 220,
        easing: "easeInQuad"
      });
    }
  });
})();

Animated CSS Checkboxes with SVG & JavaScript

Recommended