Cases à cocher CSS animées avec SVG et JavaScript

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 January 2025

Structure du conteneur d'animation HTML

HTML

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<div class="wrap">
  <h1>Animated Checkboxes</h1>
  <p>Four styles: SVG stroke-draw, pill toggle, morph pop (with full checkmark), and a JS burst.</p>

<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;
  }
}

JS

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"
      });
    }
  });
})();

Cases à cocher CSS animées avec SVG et JavaScript

Recommandé

Un code par creativearray554

Entrée HTML et CSS animée

Structure du conteneur d'animation HTML

HTML

CSS

JS

Recommandé

Un code par creativearray554

Entrée HTML et CSS animée

Structure du conteneur d'animation HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS