1 
 2<label class="checkbox-wrapper">
 3  <input type="checkbox" />
 4  <div class="checkmark">
 5    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
 6      <path
 7        d="M20 6L9 17L4 12"
 8        stroke-width="3"
 9        stroke-linecap="round"
10        stroke-linejoin="round"
11      ></path>
12    </svg>
13  </div>
14  <span class="label">Neon Checkbox</span>
15</label>          

  1 
  2.checkbox-wrapper {
  3  --checkbox-size: 25px;
  4  --checkbox-color: #00ff88;
  5  --checkbox-shadow: rgba(0, 255, 136, 0.3);
  6  --checkbox-border: rgba(0, 255, 136, 0.7);
  7  display: flex;
  8  align-items: center;
  9  position: relative;
 10  cursor: pointer;
 11  padding: 10px;
 12}
 13 
 14.checkbox-wrapper input {
 15  position: absolute;
 16  opacity: 0;
 17  cursor: pointer;
 18  height: 0;
 19  width: 0;
 20}
 21 
 22.checkbox-wrapper .checkmark {
 23  position: relative;
 24  width: var(--checkbox-size);
 25  height: var(--checkbox-size);
 26  border: 2px solid var(--checkbox-border);
 27  border-radius: 8px;
 28  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 29  display: flex;
 30  justify-content: center;
 31  align-items: center;
 32  background: rgba(0, 0, 0, 0.2);
 33  box-shadow: 0 0 15px var(--checkbox-shadow);
 34  overflow: hidden;
 35}
 36 
 37.checkbox-wrapper .checkmark::before {
 38  content: "";
 39  position: absolute;
 40  width: 100%;
 41  height: 100%;
 42  background: linear-gradient(45deg, var(--checkbox-color), #00ffcc);
 43  opacity: 0;
 44  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 45  transform: scale(0) rotate(-45deg);
 46}
 47 
 48.checkbox-wrapper input:checked ~ .checkmark::before {
 49  opacity: 1;
 50  transform: scale(1) rotate(0);
 51}
 52 
 53.checkbox-wrapper .checkmark svg {
 54  width: 0;
 55  height: 0;
 56  color: #1a1a1a;
 57  z-index: 1;
 58  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 59  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
 60}
 61 
 62.checkbox-wrapper input:checked ~ .checkmark svg {
 63  width: 18px;
 64  height: 18px;
 65  transform: rotate(360deg);
 66}
 67 
 68.checkbox-wrapper:hover .checkmark {
 69  border-color: var(--checkbox-color);
 70  transform: scale(1.1);
 71  box-shadow:
 72    0 0 20px var(--checkbox-shadow),
 73    0 0 40px var(--checkbox-shadow),
 74    inset 0 0 10px var(--checkbox-shadow);
 75}
 76 
 77.checkbox-wrapper input:checked ~ .checkmark {
 78  animation: pulse 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 79}
 80 
 81@keyframes pulse {
 82  0% {
 83    transform: scale(1);
 84    box-shadow: 0 0 20px var(--checkbox-shadow);
 85  }
 86  50% {
 87    transform: scale(0.9);
 88    box-shadow:
 89      0 0 30px var(--checkbox-shadow),
 90      0 0 50px var(--checkbox-shadow);
 91  }
 92  100% {
 93    transform: scale(1);
 94    box-shadow: 0 0 20px var(--checkbox-shadow);
 95  }
 96}
 97 
 98.checkbox-wrapper .label {
 99  margin-left: 15px;
100  font-family: "Segoe UI", sans-serif;
101  color: var(--checkbox-color);
102  font-size: 18px;
103  text-shadow: 0 0 10px var(--checkbox-shadow);
104  opacity: 0.9;
105  transition: all 0.3s;
106}
107 
108.checkbox-wrapper:hover .label {
109  opacity: 1;
110  transform: translateX(5px);
111}
112 
113/* Glowing dots animation */
114.checkbox-wrapper::after,
115.checkbox-wrapper::before {
116  content: "";
117  position: absolute;
118  width: 4px;
119  height: 4px;
120  border-radius: 50%;
121  background: var(--checkbox-color);
122  opacity: 0;
123  transition: all 0.5s;
124}
125 
126.checkbox-wrapper::before {
127  left: -10px;
128  top: 50%;
129}
130 
131.checkbox-wrapper::after {
132  right: -10px;
133  top: 50%;
134}
135 
136.checkbox-wrapper:hover::before {
137  opacity: 1;
138  transform: translateX(-10px);
139  box-shadow: 0 0 10px var(--checkbox-color);
140}
141 
142.checkbox-wrapper:hover::after {
143  opacity: 1;
144  transform: translateX(10px);
145  box-shadow: 0 0 10px var(--checkbox-color);
146}