CSS Checkbox Styles: 34 Free Animated Designs 2026

#html #css #frontend

34 Free Custom CSS Checkbox Styles 2026

ProofMatcher has 34 free CSS checkbox components replacing ugly browser defaults with animated, stylish designs.

Animated Checkmark

<label class="cb-wrap">
  <input type="checkbox" id="cb1">
  <span class="cb"></span>
  Accept terms and conditions
</label>

.cb-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.cb-wrap input { display:none; }
.cb {
  width: 22px; height: 22px;
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 5px;
  background: transparent;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.cb-wrap input:checked + .cb { background: #e53e3e; border-color: #e53e3e; }
.cb-wrap input:checked + .cb::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 700; }

Sliding Toggle Checkbox

.toggle { position:relative; width:48px; height:26px; display:inline-block; }
.toggle input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:#333; border-radius:26px; cursor:pointer; transition:.3s; }
.slider::before {
  content:'';
  position:absolute;
  height:20px; width:20px;
  left:3px; bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:.3s;
}
.toggle input:checked + .slider { background: #e53e3e; }
.toggle input:checked + .slider::before { transform: translateX(22px); }

Pill Checkbox

.pill-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; }
.pill-wrap input { display:none; }
.pill {
  width: 44px; height: 24px;
  background: #333; border-radius: 12px;
  transition: background .25s; position: relative;
}
.pill::before {
  content:''; position:absolute;
  top:3px; left:3px;
  width:18px; height:18px;
  background:#fff; border-radius:50%;
  transition:transform .25s;
}
.pill-wrap input:checked + .pill { background:#e53e3e; }
.pill-wrap input:checked + .pill::before { transform:translateX(20px); }