Casillas de verificación CSS animadas con SVG y JavaScript

Abrir en el editor Publica tu código

Recomendado

5 June 2025

Ejemplo de código HTML del formulario de inicio de sesión de Jelly Morph

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

Casillas de verificación CSS animadas con SVG y JavaScript

Recomendado

Un código de alejandrokundrah

Un código de alejandrokundrah

Ejemplo de código HTML del formulario de inicio de sesión de Jelly Morph

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

Un código de alejandrokundrah

Ejemplo de código HTML del formulario de inicio de sesión de Jelly Morph

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS