Checkbox Animated

ankushsingh
Jan 13, 2026 2
Live Preview

Live Editor

<div class="checkbox-container">
  <!--  Checkbox 1  -->
  <div>
    <input type="checkbox" id="checkbox1" name="checkbox-group" checked>

    <label for="checkbox1">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-square-rounded-check">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M9 12l2 2l4 -4" />
        <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" />
      </svg>

      <span>Checkbox 1</span>
    </label>
  </div>

  <!--  Checkbox 2  -->
  <div>
    <input type="checkbox" id="checkbox2" name="checkbox-group">

    <label for="checkbox2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-square-rounded-check">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M9 12l2 2l4 -4" />
        <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" />
      </svg>

      <span>Checkbox 2</span>
    </label>
  </div>

  <!--  Checkbox 3  -->
  <div>
    <input type="checkbox" id="checkbox3" name="checkbox-group">

    <label for="checkbox3">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-square-rounded-check">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M9 12l2 2l4 -4" />
        <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" />
      </svg>

      <span>Checkbox 3</span>
    </label>
  </div>
</div>
:root {
  --clr-bg: #0f0f1a;
  --clr-text: #ccc;
  --clr-checkbox-bg: #1a1a2e;
  --clr-stroke-inactive: #555;
  --clr-stroke-active: #00ffe7;
  --clr-text-active: #00ffe7;
  --clr-glow-shadow: 0 0 8px var(--clr-stroke-active),
    0 0 15px var(--clr-stroke-active);
  --clr-glow-filter: drop-shadow(0 0 4px var(--clr-stroke-active))
    drop-shadow(0 0 10px var(--clr-stroke-active));
  --clr-text-shadow-glow: 0 0 5px var(--clr-text-active),
    0 0 10px var(--clr-text-active);
}

body{
 background: #000;
}

/* -------- RESET LAYER -------- */
@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

/* -------- BASE LAYER -------- */
@layer base {
  body {
    display: grid;
    place-content: center;
    min-height: 100dvh;
    background-color: var(--clr-bg);
    color: var(--clr-text);
  }

  input[type="checkbox"] {
    display: none;
  }

  span {
    font-family: "Orbitron", sans-serif;
    font-size: 1.6rem;
  }
}

/* -------- COMPONENTS LAYER -------- */
@layer components {
  .checkbox-container {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
  }

  .checkbox-container label {
    display: flex;
    align-items: center;
    gap: 35px;
  }

  .checkbox-container label span {
    transition: 0.3s ease-in;
    font-weight: 500;
  }

  svg {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background-color: var(--clr-checkbox-bg);
    box-shadow: var(--clr-glow-shadow);
  }

  svg path:nth-of-type(2) {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    transition: stroke-dashoffset 0.3s ease-in;
  }

  svg path:nth-of-type(3) {
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    transition: stroke-dashoffset 0.3s ease-in;
    stroke: var(--clr-stroke-inactive);
  }

  input:checked + label svg path:nth-of-type(2),
  input:checked + label svg path:nth-of-type(3) {
    stroke-dashoffset: 0;
    stroke: var(--clr-stroke-active);
    filter: var(--clr-glow-filter);
  }

  input:checked + label span {
    color: var(--clr-text-active);
    text-shadow: var(--clr-text-shadow-glow);
  }
}
Categories

Checkbox Animated

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
