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

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