SVG और जावास्क्रिप्ट के साथ एनिमेटेड CSS चेकबॉक्स

950 zegarkidawida

संपादक में खोलें Video अपना कोड प्रकाशित करें

SVG और जावास्क्रिप्ट के साथ एनिमेटेड CSS चेकबॉक्स

अनुशंसित

18 October 2025

वेब लेब: डिजिटल समाधान, वेब डिज़ाइन और प्रौद्योगिकी

7 September 2024

भूकेन्द्रित ब्रह्मांड

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

अनुशंसित

SVG तीर के साथ HTML अगला बटन

वेब लेब: डिजिटल समाधान, वेब डिज़ाइन और प्रौद्योगिकी

भूकेन्द्रित ब्रह्मांड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS