◧Mosaic컴포넌트 카탈로그Repository
← 카탈로그
checkboxes

Neon Checkbox

#checkbox#neon#glow#particles#explosion#sci-fi#animation#css-only#dark-mode
의존성
없음 (순수 HTML/CSS/JS)
추가일
2026-06-11
출처
원본 보기 ↗
라이브 미리보기새 탭에서 열기 ↗
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neon Checkbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <label class="neon-checkbox">
    <input type="checkbox" />
    <div class="neon-checkbox__frame">
      <div class="neon-checkbox__box">
        <div class="neon-checkbox__check-container">
          <svg viewBox="0 0 24 24" class="neon-checkbox__check">
            <path d="M3,12.5l7,7L21,5"></path>
          </svg>
        </div>
        <div class="neon-checkbox__glow"></div>
        <div class="neon-checkbox__borders">
          <span></span><span></span><span></span><span></span>
        </div>
      </div>
      <div class="neon-checkbox__effects">
        <div class="neon-checkbox__particles">
          <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="neon-checkbox__rings">
          <div class="ring"></div>
          <div class="ring"></div>
          <div class="ring"></div>
        </div>
        <div class="neon-checkbox__sparks">
          <span></span><span></span><span></span><span></span>
        </div>
      </div>
    </div>
  </label>
</body>
</html>